Cum să faci un element pe o pagină web să ocupe 100% din lățimea disponibilă?

/* Utilizarea display: block; permite elementului să ocupe întreaga lățime disponibilă în mod implicit */
element {
  display: block;
}

/* Se poate specifica explicit width: 100%; */
element {
  width: 100%;
}

/* Uneori, este util să ținem cont de box-sizing, pentru ca padding și border să nu crească dimensiunea */
element {
  width: 100%;
  box-sizing: border-box; /* border și padding incluse în lățimea totală */
}

/* Pentru elemente flex sau grid, se poate folosi flex-grow sau grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Elementul va ocupa întreaga lățime disponibilă în containerul flex */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Exemplu: două coloane, fiecare ocupă 1fr (parte din spațiul liber) */
}

.grid-item {
  grid-column: span 2; /* Elementul va ocupa două coloane */
}