Jak sprawić, aby element na stronie internetowej zajmował 100% dostępnej szerokości?

/* Użycie display: block; pozwala elementowi domyślnie zajmować całą dostępną szerokość */
element {
  display: block;
}

/* Można wyraźnie określić width: 100%; */
element {
  width: 100%;
}

/* Czasami warto uwzględnić box-sizing, aby padding i border nie zwiększały rozmiaru */
element {
  width: 100%;
  box-sizing: border-box; /* border i padding wliczone w ogólną szerokość */
}

/* Dla elementów flex lub grid można używać flex-grow lub grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Element zajmie całą dostępną szerokość w kontenerze flex */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Przykład: dwie kolumny, każda zajmuje 1fr (część wolnej przestrzeni) */
}

.grid-item {
  grid-column: span 2; /* Element zajmie dwie kolumny */
}