Hoe maak je een element op een webpagina dat 100% van de beschikbare breedte inneemt?

/* Het gebruik van display: block; zorgt ervoor dat het element standaard de volledige beschikbare breedte inneemt */
element {
  display: block;
}

/* Je kunt expliciet width: 100%; aangeven */
element {
  width: 100%;
}

/* Soms is het handig om box-sizing in overweging te nemen, zodat padding en border de grootte niet vergroten */
element {
  width: 100%;
  box-sizing: border-box; /* border en padding inbegrepen in de totale breedte */
}

/* Voor flex- of grid-elementen kun je flex-grow of grid-column gebruiken */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Het element neemt de volledige beschikbare breedte in de flex-container in */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Voorbeeld: twee kolommen, elk neemt 1fr (deel van de vrije ruimte) in */
}

.grid-item {
  grid-column: span 2; /* Het element neemt twee kolommen in */
}