Élément de grille CSS
Essayez-le vous-même »
Éléments enfants (éléments)
Une grille récipient contient la grille articles.
Par défaut, un conteneur a un élément de grille pour chaque colonne, dans chaque ligne, mais vous pouvez styliser les éléments de grille afin qu’ils s’étendent sur plusieurs colonnes et/ou lignes.
La propriété grid-column :
Le grid-column La propriété définit sur quelle(s) colonne(s) placer un élément.
Vous définissez où l’élément commencera et où l’élément se terminera.
Note: Le grid-column propriété est une propriété abrégée pour le grid-column-start et le grid-column-end propriétés.
Pour placer un élément, vous pouvez vous référer à numéros de ligneou utilisez le mot-clé “span” pour définir le nombre de colonnes sur lesquelles l’élément s’étendra.
Exemple
Faites en sorte que “item1” commence sur la colonne 1 et se termine avant la colonne 5 :
.objet 1 {
grille-colonne : 1 / 5 ;
}
Essayez-le vous-même »
Exemple
Faites en sorte que “item1” commence sur la colonne 1 et s’étende sur 3 colonnes :
.objet 1 {
grille-colonne : 1 / portée 3 ;
}
Essayez-le vous-même »
Exemple
Faites en sorte que “item2” commence sur la colonne 2 et s’étende sur 3 colonnes :
.item2 {
grille-colonne : 2 / travée 3 ;
}
Essayez-le vous-même »
La propriété grid-row :
Le grid-row La propriété définit sur quelle ligne placer un élément.
Vous définissez où l’élément commencera et où l’élément se terminera.
Note: Le grid-row propriété est une propriété abrégée pour le grid-row-start et le grid-row-end propriétés.
Pour placer un élément, vous pouvez vous référer à numéros de ligneou utilisez le mot-clé “span” pour définir le nombre de lignes que l’élément couvrira :
Exemple
Faites en sorte que “item1” commence sur la ligne de ligne 1 et se termine sur la ligne de ligne 4 :
.objet 1 {
grille-ligne : 1 / 4 ;
}
Essayez-le vous-même »
Exemple
Faites en sorte que “item1” commence sur la ligne 1 et s’étende sur 2 lignes :
.objet 1 {
grille-ligne : 1 / portée 2 ;
}
Essayez-le vous-même »
La propriété grid-area
Le grid-area propriété peut être utilisée comme propriété abrégée pour la
grid-row-start, grid-column-start, grid-row-end et le grid-column-end propriétés.
Exemple
Faites en sorte que “item8” commence sur la ligne de ligne 1 et la ligne de colonne 2, et se termine sur la ligne de ligne 5 et la ligne de colonne 6 :
.item8 {
zone de grille : 1 / 2 / 5 / 6 ;
}
Essayez-le vous-même »
Exemple
Faites en sorte que “item8” commence sur la ligne de ligne 2 et la ligne de colonne 1, et s’étende sur 2 lignes et 3 colonnes :
.item8 {
surface de grille : 2 / 1 / span 2 / span 3 ;
}
Essayez-le vous-même »
Nommer les éléments de la grille
Le grid-area La propriété peut également être utilisée pour attribuer des noms aux éléments de la grille.
Entête
Menu
Principal
Droite
Bas de page
Les éléments de grille nommés peuvent être référencés par le grid-template-areas propriété du conteneur de grille.
Exemple
Item1 obtient le nom “myArea” et s’étend sur les cinq colonnes dans une disposition de grille à cinq colonnes :
.objet 1 {
zone de grille : myArea ;
}
.grid-container {
grid-template-areas: ‘myArea myArea myArea myArea myArea’;
}
Essayez-le vous-même »
Chaque ligne est définie par des apostrophes (‘ ‘)
Les colonnes de chaque ligne sont définies à l’intérieur des apostrophes, séparées par un espace.
Note: Un signe point représente un élément de grille sans nom.
Exemple
Laissez “myArea” s’étendre sur deux colonnes dans une disposition de grille à cinq colonnes (les points représentent des éléments sans nom):
.objet 1 {
zone de grille : myArea ;
}
.grid-container {
grid-template-areas : ‘myArea myArea . . .’;
}
Essayez-le vous-même »
Pour définir deux lignes, définissez la colonne de la deuxième ligne à l’intérieur d’un autre ensemble d’apostrophes :
Exemple
Faire en sorte que “item1” s’étende sur deux colonnes et deux rangées :
.grid-container {
grid-template-areas : ‘myArea myArea . . .’ ‘monZone monZone . . .’;
}
Essayez-le vous-même »
Exemple
Nommez tous les éléments et créez un modèle de page Web prêt à l’emploi :
.item1 { zone de grille : en-tête ; }
.item2 { zone de grille : menu ; }
.item3 { zone de grille : principal ; }
.item4 { zone de grille : droite ; }
.item5 { zone de grille : pied de page ; }
.grid-container {
zones de modèle de grille :
‘en-tête en-tête en-tête en-tête en-tête en-tête’
‘menu principal principal droit droit’
‘menu pied de page pied de page pied de page pied de page’;
}
Essayez-le vous-même »
L’ordre des articles
La disposition en grille nous permet de positionner les éléments où nous le souhaitons.
Le premier élément du code HTML n’a pas à apparaître comme le premier élément de la grille.
Exemple
.item1 { zone de grille : 1 / 3 / 2 / 4 ; }
.item2 { zone de grille : 2 / 3 / 3 / 4 ; }
.item3 { zone de grille : 1 / 1 / 2 / 2 ; }
.item4 { zone de grille : 1 / 2 / 2 / 3 ; }
.item5 { zone de grille : 2 / 1 / 3 / 2 ; }
.item6 { zone de grille : 2 / 2 / 3 / 3 ; }
Essayez-le vous-même »
Vous pouvez réorganiser l’ordre de certaines tailles d’écran en utilisant des requêtes multimédia :
Exemple
Écran @media uniquement et (largeur maximale : 500 px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { zone de grille : 3 / 3 / 4 / 4 ; }
.item3 { zone de grille : 2 / 1 / 3 / 2 ; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { zone de grille : 3 / 1 / 4 / 2 ; }
.item6 { zone de grille : 2 / 3 / 3 / 4 ; }
}
Essayez-le vous-même »
#Élément #grille #CSS