Kuidas teha veebilehel element, et see hõivaks 100% saadaval olevast laiusest?

/* Display: block; kasutamine võimaldab elemendil vaikimisi võtta kogu saadaval laiuse */
element {
  display: block;
}

/* Võib selgelt määrata width: 100%; */
element {
  width: 100%;
}

/* Mõnikord on kasulik arvestada box-sizing-iga, et padding ja border ei suurendaks suurust */
element {
  width: 100%;
  box-sizing: border-box; /* border ja padding on arvestatud kogu laiusse */
}

/* Flex või grid elementide jaoks võib kasutada flex-grow või grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* Element hõivab kogu saadaval laiuse flex-konteineris */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Näide: kaks veergu, igaüks hõivab 1fr (vaba ruumi osa) */
}

.grid-item {
  grid-column: span 2; /* Element hõivab kaks veergu */
}