Disposition de la grille CSS
Entête
Menu
Principal
Droite
Bas de page
Essayez-le vous-même »
Disposition de la grille
Le module CSS Grid Layout offre un système de mise en page basé sur une grille, avec des lignes et des colonnes, facilitant la conception de pages Web sans avoir à utiliser de flotteurs et de positionnement.
Prise en charge du navigateur
Les propriétés de la grille sont prises en charge dans tous les navigateurs modernes.
Éléments de grille
Une mise en page de grille se compose d’un élément parent, avec un ou plusieurs éléments enfants.
Exemple
Essayez-le vous-même »
Afficher la propriété
Un élément HTML devient un conteneur de grille lorsque son display la propriété est définie sur
grid ou inline-grid.
Tous les enfants directs du conteneur de grille deviennent automatiquement éléments de la grille.
Colonnes de la grille
Les lignes verticales des éléments de la grille sont appelées Colonnes.
Lignes de la grille
Les lignes horizontales des éléments de la grille sont appelées Lignes.
Lacunes de la grille
Les espaces entre chaque colonne/ligne sont appelés lacunes.
Vous pouvez ajuster la taille de l’écart à l’aide de l’une des propriétés suivantes :
Exemple
Le column-gap La propriété définit l’espace entre les colonnes :
.grid-container {
affichage : grille ;
écart de colonne : 50 px ;
}
Essayez-le vous-même »
Exemple
Le row-gap La propriété définit l’espace entre les lignes :
.grid-container {
affichage : grille ;
espacement des lignes : 50 px ;
}
Essayez-le vous-même »
Exemple
Le gap propriété est une propriété abrégée pour le
row-gap et le
column-gap propriétés:
.grid-container {
affichage : grille ;
écart : 50px 100px ;
}
Essayez-le vous-même »
Exemple
Le gap La propriété peut également être utilisée pour définir à la fois l’espace entre les lignes et l’espace entre les colonnes en une seule valeur :
.grid-container {
affichage : grille ;
espace : 50px ;
}
Essayez-le vous-même »
Lignes de grille
Les lignes entre les colonnes sont appelées lignes de colonne.
Les lignes entre les lignes sont appelées lignes de rangée.
Reportez-vous aux numéros de ligne lorsque vous placez un élément de grille dans un conteneur de grille :
Exemple
Placez un élément de grille sur la ligne de colonne 1 et laissez-le se terminer sur la ligne de colonne 3 :
.objet 1 {
grille-colonne-début : 1 ;
fin de colonne de grille : 3 ;
}
Essayez-le vous-même »
Exemple
Placez un élément de grille sur la ligne de ligne 1 et laissez-le se terminer sur la ligne de ligne 3 :
.objet 1 {
grille-ligne-début : 1 ;
fin de ligne de grille : 3 ;
}
Essayez-le vous-même »
Toutes les propriétés de la grille CSS
| Propriété | Description |
|---|---|
| écart de colonne | Spécifie l’écart entre les colonnes |
| écart | Une propriété abrégée pour le interligne et le écart de colonne propriétés |
| grille | Une propriété abrégée pour le grille-modèle-lignes, grille-modèle-colonnes, grille-modèle-zones, grille-auto-lignes, grille-auto-colonneset le grille-flux automatique propriétés |
| zone de grille | Soit spécifie un nom pour l’élément de grille, soit cette propriété est une propriété abrégée pour le grille-ligne-début, grille-colonne-début, fin de ligne de grilleet grille-colonne-fin propriétés |
| grille-auto-colonnes | Spécifie une taille de colonne par défaut |
| grille-flux automatique | Spécifie comment les éléments placés automatiquement sont insérés dans la grille |
| grille-auto-lignes | Spécifie une taille de ligne par défaut |
| grille-colonne | Une propriété abrégée pour le grille-colonne-début et le grille-colonne-fin propriétés |
| grille-colonne-fin | Spécifie où terminer l’élément de grille |
| grille-colonne-écart | Spécifie la taille de l’espace entre les colonnes |
| grille-colonne-début | Spécifie où commencer l’élément de grille |
| écart de grille | Une propriété abrégée pour le grille-ligne-écart et grille-colonne-écart propriétés |
| ligne de grille | Une propriété abrégée pour le grille-ligne-début et le fin de ligne de grille propriétés |
| fin de ligne de grille | Spécifie où terminer l’élément de grille |
| grille-ligne-écart | Spécifie la taille de l’espace entre les lignes |
| grille-ligne-début | Spécifie où commencer l’élément de grille |
| modèle de grille | Une propriété abrégée pour le grille-modèle-lignes, grille-modèle-colonnes et zones de grille propriétés |
| zones de modèle de grille | Indique comment afficher les colonnes et les lignes à l’aide d’éléments de grille nommés |
| grille-modèle-colonnes | Spécifie la taille des colonnes et le nombre de colonnes dans une disposition en grille |
| grille-modèle-lignes | Spécifie la taille des lignes dans une disposition en grille |
| interligne | Spécifie l’écart entre les lignes de la grille |
#Disposition #grille #CSS