Un guide complet de la mise en page de la grille CSS

CSS Grid est une mise en page bidimensionnelle que vous pouvez utiliser pour créer des éléments Web réactifs. Les éléments de la grille sont disposés en colonnes et vous pouvez facilement positionner des lignes sans vous soucier du code HTML.

Avantages de la grille CSS :

1. CSS Grid est très flexible et réactif. Il facilite la création de mises en page en deux dimensions. CSS Grid est également facile à utiliser et est pris en charge par la plupart des navigateurs Web.
2. La grille CSS rend votre balisage plus propre (dans votre code HTML) et vous donne beaucoup plus de flexibilité. C’est en partie parce que vous n’avez pas besoin de modifier le balisage (code HTML) pour modifier la position d’un élément à l’aide de la grille CSS.

Quand devez-vous utiliser la grille CSS :

1. Lorsque nous avons une mise en page de conception complexe à implémenter, CSS Grid est meilleur que la propriété CSS float. En effet, Grid est une disposition bidimensionnelle (avec des colonnes et des lignes), tandis que la propriété flottante CSS est une disposition unidimensionnelle (avec des colonnes ou des lignes).
2. La grille est également un bon choix lorsque nous avons besoin d’un espace ou d’un espace entre les éléments. En utilisant la propriété CSS grid-gap, l’espacement de deux éléments est beaucoup plus facile que d’utiliser les propriétés CSS margin et padding qui pourraient finir par compliquer les choses.

Propriétés de la grille :

Il s’agit d’une propriété de grille CSS qui abrite les éléments/éléments de la grille. Nous implémentons la propriété de conteneur de grille CSS en définissant le conteneur sur une propriété d’affichage de grille.

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Grille de toutes les propriétés des conteneurs :

Un conteneur de grille est une boîte/un conteneur qui contient des éléments de grille et peut placer ces éléments dans les lignes et les colonnes. Voir la capture d’écran ci-dessous, elle montre toutes les propriétés

Comment utiliser les propriétés du conteneur de grille dans CSS :

Maintenant, nous allons pratiquement mettre en œuvre certaines des propriétés décrites ci-dessus pour une compréhension approfondie.

• Les propriétés grid-template-columns & grid-template-rows :

Ces propriétés peuvent prendre plusieurs valeurs séparées par des espaces telles que auto, pourcentage, etc.

grille-template-columns : 1fr auto auto ;

De même, nous pouvons utiliser le grille-modèle-lignes propriété pour spécifier la taille des lignes.

• La propriété align-content

Pour aligner la grille le long de l’axe vertical/bloc ou des colonnes, nous pouvons utiliser la propriété align-content, et elle peut prendre différentes valeurs pour exécuter différentes fonctionnalités telles que « centre », « début », « fin », « espace-uniformément », etc.

.récipient-classe {
affichage : grille ;
grille-modèle-colonnes : auto auto auto ;
hauteur: 300 pixels ;
aligner-contenu: fin;
arrière-plan-couleur: vert;
rembourrage : 10px ;
}

Voici quelques captures d’écran supplémentaires pour référence :

J’espère que vous avez maintenant une bonne connaissance de CSS Grid Layout. Merci