Kako napraviti da element na veb stranici zauzima 100% dostupne širine?

/* Korišćenje display: block; omogućava elementu da podrazumevano zauzima celu dostupnu širinu */
element {
  display: block;
}

/* Može se eksplicitno navesti width: 100%; */
element {
  width: 100%;
}

/* Ponekad je korisno uzeti u obzir box-sizing, da padding i border ne povećavaju veličinu */
element {
  width: 100%;
  box-sizing: border-box; /* border i padding uključeni u ukupnu širinu */
}

/* Za flex ili grid elemente, može se koristiti flex-grow ili grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Element će zauzeti celu dostupnu širinu u flex kontejneru */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Primer: dve kolone, svaka zauzima 1fr (deo slobodnog prostora) */
}

.grid-item {
  grid-column: span 2; /* Element će zauzeti dve kolone */
}