Hogyan lehet egy elemet egy weboldalon úgy beállítani, hogy az a rendelkezésre álló szélesség 100%-át foglalja el?

/* A display: block; használata lehetővé teszi, hogy az elem alapértelmezés szerint az összes rendelkezésre álló szélességet elfoglalja */
element {
  display: block;
}

/* Egyértelműen meg lehet adni a width: 100%; értéket */
element {
  width: 100%;
}

/* Néha hasznos figyelembe venni a box-sizing értékét, hogy a padding és border ne növelje a méretet */
element {
  width: 100%;
  box-sizing: border-box; /* border és padding beleértve a teljes szélességbe */
}

/* Flex vagy grid elemek esetén használhatjuk a flex-grow vagy grid-column tulajdonságokat */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Az elem elfoglalja a rendelkezésre álló teljes szélességet a flex-konténerben */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Példa: két oszlop, mindkettő 1fr-t foglal el (a szabad tér része) */
}

.grid-item {
  grid-column: span 2; /* Az elem két oszlopot foglal el */
}