Wie macht man ein Element auf einer Webseite, dass es 100% der verfügbaren Breite einnimmt?

/* Die Verwendung von display: block; ermöglicht es dem Element, standardmäßig die gesamte verfügbare Breite einzunehmen */
element {
  display: block;
}

/* Es kann explizit width: 100%; angegeben werden */
element {
  width: 100%;
}

/* Manchmal ist es nützlich, box-sizing zu berücksichtigen, damit padding und border die Größe nicht erhöhen */
element {
  width: 100%;
  box-sizing: border-box; /* border und padding sind in der Gesamtbreite enthalten */
}

/* Für Flex- oder Grid-Elemente kann man flex-grow oder grid-column verwenden */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Das Element nimmt die gesamte verfügbare Breite im Flex-Container ein */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Beispiel: zwei Spalten, jede nimmt 1fr (Anteil des freien Raums) ein */
}

.grid-item {
  grid-column: span 2; /* Das Element nimmt zwei Spalten ein */
}