CSS3 ajoute quelques nouvelles notations fonctionnelles pour définir des valeurs de couleur pour les éléments qui sont : rgba(), hsl(), hsla() et opecity.
Découvrez les possibilités infinies de la propriété CSS grid
La propriété CSS grid (ou "grille CSS") est un outil puissant pour la mise en page des éléments HTML sur une page web. Elle permet de définir une grille de lignes et de colonnes sur laquelle vous pouvez disposer vos éléments de manière structurée et organisée.
Pour utiliser la propriété grid, vous devez d'abord définir un élément HTML comme étant un conteneur de grille en utilisant la propriété display: grid. Vous pouvez ensuite définir les lignes et les colonnes de votre grille en utilisant les propriétés grid-template-columns et grid-template-rows.
La Syntaxe CSS
grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;
| Valeurs par défaut | normal |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS1 |
| Syntaxe JavaScript: | object.style.grid="250px / auto auto auto" |
Par exemple, voici comment vous pouvez définir une grille avec deux colonnes de largeur égale :
Exemple Copier le code
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
Vous pouvez également utiliser des valeurs absolues (en pixels, par exemple) ou des valeurs relatives (par exemple, en utilisant la unité %) pour définir la largeur de vos colonnes.
Une fois que vous avez défini votre grille, vous pouvez ajouter des éléments à votre grille en utilisant les propriétés grid-column et grid-row. Par exemple, pour ajouter un élément à la première colonne de la première ligne de votre grille, vous pouvez utiliser les propriétés suivantes :
Exemple Copier le code
.item {
grid-column: 1;
grid-row: 1;
}
La propriété grid vous permet également de définir des gabarits de grille personnalisés pour chaque ligne et colonne de votre grille, en utilisant la propriété grid-template-areas. Cela vous permet de créer des dispositions plus complexes en assignant des noms aux différentes zones de votre grille.Voici un exemple de code qui utilise la propriété grid-template-areas pour créer une grille à trois colonnes, avec une colonne principale et deux colonnes latérales :
Exemple Copier le code
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-areas:
"sidebar main sidebar"
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
Il existe de nombreuses autres propriétés CSS que vous pouvez utiliser pour contrôler la disposition de votre grille, telles que grid-gap pour ajouter des espacements entre les éléments de votre grille, ou justify-items et align-items pour aligner les éléments de votre grille horizontalement et verticalement.La propriété CSS grid est particulièrement utile lorsque vous avez besoin de créer des dispositions complexes ou de disposer des éléments de manière à ce qu'ils s'adaptent automatiquement à la taille de l'écran. Elle offre une flexibilité et une précision supérieures à celles des autres méthodes de mise en page CSS, telles que float ou position, et est particulièrement adaptée aux dispositions réactives.
En outre, la propriété grid est bien supportée par les navigateurs modernes, bien que vous deviez peut-être utiliser des préfixes de navigateur pour assurer une compatibilité avec les versions plus anciennes.
En résumé, la propriété CSS grid est un outil puissant pour la mise en page des éléments HTML sur une page web, qui vous permet de créer des dispositions complexes et réactives de manière rapide et facile. Si vous avez besoin de contrôler précisément la disposition de vos éléments HTML, la propriété grid est un choix judicieux.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 57 | 16 | 52 | 10 | 44 |
Valeurs de la propriété
none : Valeur par défaut. Pas de dimensionnement spécifique des colonnes ou des lignes.grid-template-rows / grid-template-columns : Spécifie la ou les tailles des colonnes et des lignes.
grid-template-areas : Spécifie la disposition de la grille en utilisant des éléments nommés
grid-template-rows / grid-auto-columns : Spécifie la taille (hauteur) des lignes et la taille automatique des colonnes.
grid-auto-rows / grid-template-columns : Spécifie la taille automatique des lignes et définit la propriété grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns : Spécifie la taille (hauteur) des lignes, la manière de placer les éléments placés automatiquement et la taille automatique des colonnes.
grid-auto-flow grid-auto-rows / grid-template-columns : Spécifie la manière de placer les éléments placés automatiquement et la taille automatique des lignes, et définit la propriété grid-template-columns.
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.