RAM (Repeat, Auto, Minmax)

Dans ce septième exemple, combinez certains des concepts que vous avez déjà appris pour créer une mise en page responsive avec des éléments enfants flexibles et placés automatiquement. Génial. Les termes clés à retenir ici sont repeat, auto-(fit|fill) et minmax(), que vous vous souvenez par l'acronyme RAM.

L'ensemble ressemble à ceci:

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

Vous utilisez à nouveau repeat(), mais cette fois, vous utilisez le mot clé auto-fit au lieu d'une valeur numérique explicite. Cela permet le positionnement automatique de ces éléments enfants. Ces enfants ont une valeur minimale de base de 150px avec une valeur maximale 1fr. Cela signifie que sur les petits écrans, ils occuperont toute la largeur de 1fr et, lorsqu'ils auront chacun 150px de large, ils commenceront à s'insérer sur la même ligne.

Avec auto-fit, toutes les pistes complètement vides sont réduites à 0, et les pistes remplies s'agrandissent pour occuper leur espace. Toutefois, si vous remplacez cette valeur par auto-fill, les pistes vides occupent le même espace que si elles étaient remplies:

.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));
}