¿Cómo hacer que un elemento en una página web ocupe el 100% del ancho disponible?

/* El uso de display: block; permite que el elemento ocupe todo el ancho disponible por defecto */
element {
  display: block;
}

/* Se puede especificar explícitamente width: 100%; */
element {
  width: 100%;
}

/* A veces es útil tener en cuenta box-sizing, para que el padding y border no aumenten el tamaño */
element {
  width: 100%;
  box-sizing: border-box; /* border y padding incluidos en el ancho total */
}

/* Para elementos flex o grid, se puede usar flex-grow o grid-column */
.container {
  display: flex;
}

.item {
  flex-grow: 1; /* El elemento ocupará todo el ancho disponible en el contenedor flex */
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Ejemplo: dos columnas, cada una ocupa 1fr (parte del espacio libre) */
}

.grid-item {
  grid-column: span 2; /* El elemento ocupará dos columnas */
}