Share
Dans les tutoriels précédents, nous avons appris à configurer une grille en définissant ses propriétés explicites (comme Grille-modèle-colonnes et grille-template-zones) et même certaines de ses propriétés implicites (comme colonnes auto-grille). Dans ce tutoriel, nous allons examiner la propriété abrégée la grille qui traite rapidement de tout ce qui précède en une seule déclaration.
Comme d'habitude, commencez par déclarer affichage: grille; sur votre conteneur. Ensuite, utilisez le la grille propriété pour disposer vos lignes, puis vos colonnes:
.grid-1 display: grid; grille: 100px auto 300px / répétition (2, 1fr) 100px;
L'instruction ci-dessus indique que nous voulons trois lignes explicites de 100px, auto et 300px. Et (en utilisant le répéter() fonction) deux colonnes de 1fr, puis une de 100px. C'est exactement la même chose que cette version plus longue:
.grid-1 display: grid; grid-template-rows: 100px auto 300px; Grille-modèle-colonnes: répéter (2, 1fr) 100px;
Les deux déclarations nous donnent ceci:
Nous demandons à Grid d'utiliser les valeurs implicites au-delà des valeurs explicites définies. dans le la grille En abrégé, nous ne pouvons pas combiner les deux, nous devons donc faire un choix. Jetez un coup d'oeil à ceci, par exemple:
.grid-1 display: grid; grille: flux automatique 100px / 1fr 100px;
Dans ce cas, nous avons bloqué des colonnes explicites (une de 1fr, une autre de 100px) mais nos lignes utilisent une forme abrégée de écoulement automatique et lignes-grille automatique. Ça dit “Lorsque vous devez ajouter plus de pistes à la grille, ajoutez-les sous forme de lignes. Et faites en sorte qu’elles atteignent 100 pixels de haut. C'est pareil que ça:
.grid-1 display: grid; Grille-modèle-colonnes: 1fr 100px; grid-auto-flow: row; grid-auto-rows: 100px;
C'est un comportement plutôt par défaut, mais nous constatons un changement plus important si nous demandons plutôt à notre grille implicite d'utiliser des colonnes supplémentaires:
.grid-1 display: grid; grille: 100px 300px / flux automatique 100px;
Cela nous donne deux lignes de 100px et 300px, puis définit efficacement grid-auto-flow: colonne;. C'est pareil que:
.grid-1 display: grid; grid-template-rows: 100px 300px; grid-auto-flow: colonne; grilles-auto-colonnes: 100px;
Maintenant, l'algorithme de placement automatique place les éléments de haut en bas, en ajoutant des colonnes à droite lorsqu'il manque d'espace:
Remarque: nous ne pouvons pas déclarer flux automatique sur les deux rangées et colonnes, cela ne fonctionnera pas.
Si vous repensez à notre tutoriel Comprendre la grille CSS «Algorithme d'auto-placement», vous vous en souviendrez, nous avons discuté clairsemé et dense; mots-clés décrivant la manière dont les éléments sont regroupés dans une grille. Ceux-ci peuvent également être utilisés aux côtés flux automatique, comme ça:
.grid-1 display: grid; grille: 100px 300px / flux auto dense 100px;
Les zones de gabarit permettent de nommer des zones de notre réseau, de manière presque représentative visuellement. Dans sa forme la plus simple, nous utiliserions simplement la grille pour décrire nos zones de modèles et rien d'autre:
.grid-1 display: grid; grille: "en-tête en-tête" "barre latérale principale" "pied de page pied de page pied de page";
Nous indiquerons ensuite quelle zone chaque élément de la grille remplit, comme ceci:
.item-1 grid-area: header;
Si vous vous souvenez de notre didacticiel des zones de modèle d'origine, nous avions quelques détails supplémentaires pour nous donner les dimensions des colonnes et des lignes:
.grid-1 display: grid; Grille-modèle-colonnes: répéter (3, 1fr); grid-template-rows: 80px 180px 80px; grid-template-areas: "en-tête en-tête" "barre latérale principale" "pied de page pied de page pied de page";
Nous pouvons le faire aussi, comme suit:
.grid-1 display: grid; grille: "en-tête en-tête" 80px "barre latérale principale" 180px "footer footer footer" 80px / 1fr 1fr 1fr;
Nous ajoutons les largeurs de colonne après la barre oblique (le répéter() la fonction ne fonctionnera pas dans ce cas, mais je ne sais pas pourquoi). Et nous ajoutons les hauteurs de ligne en ligne après les déclarations de surface. C'est ce que nous finissons avec:
Ce tutoriel aurait dû vous expliquer comment le logiciel la grille sténographie fonctionne bien. Jouez avec, voyez quels autres aspects du module CSS Grid vous pouvez utiliser, et dites-nous combien de temps cela vous fait gagner!
Accentsconagua