Propriétés Grid : grid-template-columns, grid-template-rows, grid-gap

Les propriétés grid-template-columns, grid-template-rows, et grid-gap sont des éléments essentiels de CSS Grid. Elles permettent de définir la structure et l'espacement des lignes et des colonnes dans une grille CSS.

1. grid-template-columns et grid-template-rows

Les propriétés grid-template-columns et grid-template-rows permettent de définir les dimensions des colonnes et des lignes d'une grille CSS.

• grid-template-columns : Définit les dimensions des colonnes de la grille. Vous pouvez spécifier la largeur de chaque colonne en utilisant différentes unités CSS, telles que pixels, pourcentages, fractions (fr), etc.

• grid-template-rows : Définit les dimensions des lignes de la grille. Vous pouvez spécifier la hauteur de chaque ligne de la même manière que pour grid-template-columns.

Exemple :

.grid-container {
    display: grid;
    grid-template-columns: 100px 200px 1fr;
    grid-template-rows: 50px 100px;
}

Dans cet exemple, la grille a trois colonnes avec des largeurs de 100 pixels, 200 pixels et une fraction de l'espace restant (1fr), et deux lignes avec des hauteurs de 50 pixels et 100 pixels.

2. grid-gap

La propriété grid-gap définit l'espacement entre les lignes et les colonnes d'une grille CSS.

• grid-gap : Définit l'espacement entre les lignes et les colonnes de la grille. Vous pouvez spécifier l'espacement en utilisant différentes unités CSS, telles que pixels, pourcentages, etc.

Exemple :

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 20px;
}

Dans cet exemple, il y a deux colonnes et deux lignes dans la grille, avec un espacement de 20 pixels entre elles.

Conclusion

Les propriétés grid-template-columns, grid-template-rows, et grid-gap sont des éléments fondamentaux de CSS Grid qui permettent de définir la structure et l'espacement des lignes et des colonnes dans une grille CSS. En les utilisant de manière efficace, vous pouvez créer des mises en page complexes et structurées qui s'adaptent à différentes tailles d'écran et offrent une expérience utilisateur optimale. Continuez à explorer CSS Grid et à pratiquer son utilisation dans vos projets CSS pour améliorer vos compétences en conception web.