RAM (Ripeti, Automatica, Minmax)

Per questo settimo esempio, combina alcuni dei concetti che hai già imparato per creare un layout adattabile con elementi secondari flessibili e posizionati automaticamente. Piuttosto piacevole. I termini chiave da ricordare qui sono repeat, auto-(fit|fill) e minmax(), che ricordi con l'acronimo RAM.

Il risultato è:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Stai utilizzando di nuovo repeat(), ma questa volta la parola chiave auto-fit anziché un valore numerico esplicito. In questo modo viene attivato il posizionamento automatico di questi elementi secondari. Questi elementi secondari hanno un valore minimo di base di 150px con un valore massimo di 1fr, il che significa che su schermi più piccoli occuperanno tutta la larghezza di 1fr e, man mano che raggiungono ciascuno 150px di larghezza, inizieranno a scorrere sulla stessa linea.

Con auto-fit, tutte le tracce completamente vuote verranno compresse a 0 e le tracce piene occuperanno spazio. Tuttavia, se la modifichi in auto-fill, le tracce vuote occuperanno la stessa quantità di spazio che occuparebbero se riempite:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}