CSS Flex ou grid astuce design

Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec une prise en charge de l’alignement du contenu, du dimensionnement des colonnes et des lignes, et de la spécification des zones de la mise en page qui doivent être occupées par un contenu particulier. Dans le module CSS Grid Layout, le terme « grille » est utilisé pour décrire une grille bidimensionnelle de pistes et de cellules. La grille est constituée d’une série de lignes horizontales et verticales qui se croisent pour former une série de carrés ou « cellules » Le contenu peut être placé dans ces cellules, et il sera automatiquement redimensionné pour s’adapter à la cellule. Les cellules peuvent également être fusionnées pour créer des zones plus grandes. Le module de mise en page CSS Grid permet de créer facilement des mises en page complexes et réactives sans avoir à utiliser de flotteurs ou de positionnement.

Dans cet article nous allons archiver un tweet de @melvynxdev

Quand utiliser grid ?

Comme tu peux le voir dans la vidéo, c’est quand tu as une liste d’élément et que tu veux plusieurs items par liste en fonction de la taille d’écran ! Tu trouveras surement d’autres use-case !

grid-template-columns : Permet de définir la taille de chaque colonne ainsi que le nombre de colonnes

L’unité fr est une taille flexible uniquement pour les grid. Elle va remplir toute la place possible

Repeat va tout simplement éviter la redondance

auto-fill : il va calculer le nombre de colonnes en fonction de la taille ! S’il y a la place pour 3 en comptant les espaces, il sera égal à 3 !

minmax : Il définit la valeur min et max de chaque colonne ! Le snippet s’établit sur le mélange de minmax avec l’unité fr ! Tu définis la valeur min, par ex 150 La valeur max, 1fr Ce qui donne en français : « prends min 150 px, mais s’il y a de place, prends-la »

Contenu de la feuille de style css

.grid {
  padding: 16px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.card {
  height: 225px;
  background: white;
  border-radius: 8px;
  padding: 16px;
}

Contenu de la page html

<div class="grid">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
      </div>