Share
Une chose que nous avons mentionnée mais que nous n’avons pas encore couverte correctement dans cette série est zones de la grille. Jusqu'à présent, nos éléments de grille ont été contenus dans une seule cellule de grille, mais nous pouvons obtenir des présentations plus utiles en dépassant ces limites. Nous allons jeter un coup d'oeil!
Voici la grille sur laquelle nous avons travaillé: neuf éléments de grille automatiquement placés dans trois colonnes égales, trois lignes égales, divisées par des gouttières de 20 pixels.
Actuellement, nos articles ont uniquement des styles de couleur, mais revenons à ce que nous avons appris dans le premier tutoriel et ajoutons quelques colonne de grille et rangée de la grille règles, cette fois avec quelque chose en plus:
.item-1 background: # b03532; grille-colonne: 1/3; rangée de grille: 1;
Dans ce raccourci colonne de grille déclaration que nous utilisons efficacement grille-colonne-début et fin de colonne, indiquer à l'élément de commencer à la ligne 1 de la grille et de se terminer à la ligne 3 de la grille.
Lignes de quadrillage 1 et 3Voici ce que cela nous donne; le premier élément s'étend maintenant sur deux cellules, poussant les autres éléments vers la droite et vers le bas conformément à l'algorithme de placement automatique de Grid.
La même chose peut être faite avec des lignes, ce qui nous donnerait une zone beaucoup plus grande en haut à gauche de notre grille..
.item-1 background: # b03532; grille-colonne: 1/3; rangée de grille: 1/3;
En utilisant une syntaxe peut-être plus simple, nous pouvons changer fin de colonne pour le envergure mot-clé. Avec envergure nous ne sommes pas obligés de spécifier où la zone se termine, mais plutôt de définir le nombre de pistes sur lesquelles l'élément doit être réparti:
.item-1 background: # b03532; grille-colonne: 1 / span 2; grille-rangée: 1 / span 2;
Cela nous donne le même résultat final, mais si nous devions changer le point de départ de l'élément, nous ne serions plus obligés de changer la fin..
Dans la démo suivante, vous constaterez que nous avons vidé la mise en page en supprimant quatre des éléments. Nous avons déclaré le positionnement sur deux de nos éléments: le premier s'étend sur deux colonnes et deux rangées, tandis que le quatrième commence sur la colonne 3, rangée 2, et s'étend vers le bas sur deux pistes:
Les éléments restants remplissent automatiquement l'espace disponible. Cela met parfaitement en évidence le fait qu’une mise en page de grille ne doit pas nécessairement refléter l’ordre source des éléments.
Remarque: il y a beaucoup de situations où l'ordre source absolument devrait refléter la présentation, ne pas oublier l'accessibilité.
L'utilisation des méthodes de numérotation que nous avons décrites jusqu'ici fonctionne très bien, mais les zones de modèles de grille peuvent rendre la définition des dispositions encore plus intuitive..
Plus précisément, ils nous permettent de nommer des zones sur la grille. Avec ces zones nommées, nous pouvons les référencer (au lieu de numéros de ligne) pour positionner nos éléments. Restons pour le moment dans notre démo actuelle et utilisons-la pour nous faire une mise en page approximative comprenant:
Nous définissons ces zones sur notre conteneur de grille, presque comme si nous les dessinions:
.grid-1 / *… styles existants * / grid-template-areas: "en-tête en-tête" "barre latérale principale" "pied de page pied de page pied de page";
Nous tournons maintenant notre attention vers les objets, laissant tomber le colonne de grille et rangée de la grille règles en faveur de surface de la grille:
.item-1 background: # b03532; zone de grille: en-tête; .item-2 background: # 33a8a5; zone de grille: principale; .item-3 background: # 30997a; zone de grille: barre latérale; .item-4 background: # 6a478f; zone de grille: pied de page;
Notre premier élément est inséré dans l'en-tête et s'étend sur les trois colonnes d'en-tête. Notre deuxième élément se voit attribuer la zone de contenu principal, le troisième devient notre barre latérale et le quatrième notre pied de page. Et ceux-ci ne doivent pas nécessairement suivre l'ordre des sources-.point 4 pourrait tout aussi facilement être positionné dans la zone d'en-tête.
Comme vous pouvez le constater, cela facilite grandement la mise en page. En fait, alors que nous sommes d'humeur à représenter visuellement nos réseaux, pourquoi ne pas aller encore plus loin et utiliser des émoticônes?!
Une page Web donnée contiendra toutes sortes de composants imbriqués, voyons comment cela fonctionne avec Grid.
Quand on déclare un conteneur de grille affichage: grille; seuls ses descendants directs deviennent éléments de la grille. Le contenu que nous ajoutons à ces éléments enfants ne sera absolument pas affecté par Grid, sauf indication contraire expresse..
Dans notre exemple, nous allons ajouter .point 5 , .article-6, et .point 7 retour dans le balisage, les imbriquer dans .élément 2.
Alors maintenant, nous devons déclarer notre .élément 2 également un conteneur de grille, mettant en place sa grille avec deux colonnes et deux lignes.
affichage: grille; Grille-modèle-colonnes: 1fr 30%; grid-template-rows: auto auto; intervalle de grille: 20px; grid-template-areas: "header header" "article sidebar";
Nous pouvons utiliser les noms «en-tête», «article» et «sidebar» à nouveau ici; il n'y a pas de confusion, car tout reste dans le contexte. Ces zones de la grille s'appliquent uniquement à la grille au sein de .élément 2.
Pour résumer ce dont nous avons parlé:
Accentsconagua
colonne de grille nous offre un moyen abrégé de définir où commence et se termine un élément.envergure mot clé pour rendre nos règles plus flexibles.grille-template-zones donnez-nous le pouvoir de nommer nos zones de grille (même en utilisant des émojis si l'ambiance nous y amène).affichage: grille; et en suivant le même processus.Une fois de plus, nous avons appris quelques aspects utiles de la spécification CSS Grid Layout, et nous nous rapprochons de plus en plus de cas d'utilisation dans le monde réel! Dans le prochain tutoriel, nous examinerons des mises en page plus complexes et verrons comment une conception réactive s’intègre dans l’équation..
