oujood.com

Utiliser la propriété grid-area pour créer une grille flexible en CSS

Mise en place d'une grille avec la propriété grid-area : exemples et astuces

chercher |

Mise en place d'une grille avec la propriété grid-area : exemples et astuces


La propriété CSS grid-area est utilisée pour définir l'emplacement d'un élément de grille dans une grille à plusieurs dimensions. Elle peut être utilisée pour définir l'emplacement d'un élément de grille sur une grille existante ou pour créer une nouvelle grille à l'intérieur d'un élément de grille existant.

Pour utiliser la propriété grid-area, vous devez d'abord définir un élément de grille à l'aide de la propriété display: grid ou display: inline-grid. Vous pouvez ensuite utiliser la propriété grid-area pour définir l'emplacement d'un élément de grille sur la grille.

La Syntaxe CSS grid-area
grid-area: <ligne de départ> / <colonne de départ> / <ligne de fin> / <colonne de fin>;
Chaque valeur représente l'emplacement d'un élément de grille sur la grille. La ligne de départ et la colonne de départ définissent le coin supérieur gauche de l'élément de grille, tandis que la ligne de fin et la colonne de fin définissent le coin inférieur droit de l'élément de grille.
Vous pouvez également utiliser des noms de ligne et de colonne pour définir l'emplacement d'un élément de grille sur la grille. Pour ce faire, vous devez d'abord définir des noms de ligne et de colonne à l'aide de la propriété grid-template-rows et grid-template-columns, comme ceci :
.grid {
  display: grid;
  grid-template-columns: [colonne1] 1fr [colonne2] 1fr [colonne3] 1fr;
  grid-template-rows: [ligne1] 1fr [ligne2] 1fr [ligne3] 1fr;
}
Puis, vous pouvez utiliser la syntaxe suivante pour définir l'emplacement d'un élément de grille sur la grille en utilisant les noms de ligne et de colonne :
grid-area: <nom de ligne de départ> / <nom de colonne de départ> / <nom de ligne de fin> / <nom de colonne de fin>;
Valeurs par défautauto/auto/auto/auto
Inherited: non
Animable : oui En savoir plus sur l'animable
Version: CSS1
Syntaxe JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Prise en charge de la propriété css grid-area dans les navigateurs

La propriété CSS grid-area est prise en charge par la plupart des navigateurs modernes, comme le montre le tableau suivant:

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.

ExplorateurGoogle ChromeInternet ExplorerFirefoxSafariOpera
Verssion57165210 44

Voici un exemple de code qui utilise la propriété grid-area pour définir l'emplacement d'un élément de grille sur une grille à deux dimensions :

Exemple       Copier le code

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.item1 {
  grid-area: 1 / 1 / 2 / 2;
}

.item2 {
  grid-area: 1 / 2 / 3 / 3;
}

.item3 {
  grid-area: 2 / 1 / 3 / 3;
}

Dans cet exemple, nous avons défini une grille à trois colonnes et trois lignes à l'aide de la propriété grid-template-columns et grid-template-rows. Nous avons ensuite utilisé la propriété grid-area pour définir l'emplacement des éléments item1, item2 et item3 sur la grille.

Valeurs de la propriété css grid-area

grid-row-start : Spécifie la ligne sur laquelle l'élément doit commencer à être affiché.
grid-column-start : Spécifie la colonne dans laquelle l'élément doit commencer à être affiché.
grid-row-end : Indique sur quelle ligne il faut arrêter d'afficher l'élément, ou le nombre de lignes à couvrir.
grid-column-end : Indique sur quelle ligne de colonne il faut arrêter d'afficher l'élément, ou le nombre de colonnes à couvrir.
itemname Spécifie un nom pour l'élément de la grille




Voir aussi nos tutoriel :

fonction ucfirst, ucfirst

Met le premier caractère en majuscule

Balise object

Définit un objet incorporé

Balise élément de lisste dl

Définit une liste de définitions