Griglia con larghezza automatica dei blocchi in CSS

Nella lezione precedente, nella nostra griglia risultava che la larghezza degli elementi e dei loro margini doveva sommare la larghezza del genitore. Questo è un po' poco universale. Facciamo in modo che gli elementi si adattino automaticamente alla larghezza del genitore.

Supponiamo di avere un genitore come questo:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

Supponiamo che gli elementi di questa griglia stiano in 4 blocchi per riga:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Impostiamo la larghezza dei nostri blocchi in modo che ciascuno di essi occupi un quarto del genitore. Per fare questo impostiamo la loro dimensione al 25%:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}