Des connaissances détaillées sur la disposition des grilles CSS à ne pas manquer !

Cet article partagera avec vous quelques points de connaissances sur la disposition des grilles CSS et vous permettra d'en apprendre davantage sur la disposition des grilles CSS. J'espère qu'il vous sera utile !

Aujourd'hui, de nombreuses fonctionnalités peuvent être utilisées pour une mise en page Web moderne. La plus connue est peut-être Flexbox, et tout le monde pense que la mise en page Flexbox peut être facilement résolue. Bien que la mise en page Flexbox soit très puissante, il s'agit toujours d'une mise en page unidimensionnelle. Pour certains scénarios de mise en page bidimensionnelle, elle présente encore de grandes limites. Cela montre également que CSS Grid est toujours indispensable dans la mise en page Web moderne ou dans les futures solutions de mise en page. Après tout, jusqu'à présent, c'est la seule technologie qui prend en charge la mise en page bidimensionnelle. En 2021, j'ai passé quelques mois à revoir tout ce qui concerne CSS Grid, et j'ai expliqué CSS Grid à travers plus de 20 articles. On peut dire que cette série est l'introduction la plus systématique à CSS Grid sur tout Internet. Si je n'y ai pas encore été exposé, ou si j'ai une certaine peur de CSS Grid, cette série vaut la peine.

Termes importants dans CSS Grid

Tout module fonctionnel a sa propre terminologie professionnelle, et CSS Grid ne fait pas exception, mais la terminologie technique de CSS Grid couvre une gamme plus large. Dans cet article, les termes associés dans CSS Grid sont expliqués en détail, tels que l'axe de la grille, le conteneur de grille, l'élément de grille, la ligne de grille, la cellule de grille, la piste de grille, la zone de grille, la grille explicite, la grille implicite, l'espacement de la grille (emplacement de grille), sous-grille et grille imbriquée, etc.

Propriétés et tailles de la grille

Après avoir une certaine compréhension des termes techniques liés à la disposition de la grille CSS, vous pouvez commencer à vraiment comprendre les propriétés qui peuvent être utilisées dans la grille CSS. Dans cette section, nous discuterons principalement avec vous des propriétés qui peuvent être utilisées pour les conteneurs de grille et définirons les tailles des conteneurs de grille et des éléments de grille. À cette fin, nous pouvons définir une grille explicite en utilisant des propriétés telles que les colonnes de modèle de grille, les lignes de modèle de grille et les zones de modèle de grille.

Définition de la taille des pistes de grille

Dans CSS Grid, les colonnes de modèle de grille et les lignes de modèle de grille peuvent être utilisées pour définir explicitement les pistes de grille. Cependant, dans cette section, nous discutons principalement avec vous des unités qui peuvent être utilisées pour définir la taille des pistes de la grille, notamment l'unité unique fr dans CSS Grid.

Utilisez des dimensions intrinsèques pour définir la taille de la piste de grille

Dans les colonnes de modèle de grille et les lignes de modèle de grille, en plus des unités de longueur (), des unités de pourcentage () et En plus de définir la taille de la piste de grille dans l'unité du facteur élastique (fr), vous pouvez également utiliser certains mots-clés (tels que none, auto, min-content, max-content, fit-content et fit-content() ) pour définir la taille de la piste de la grille. Parmi eux, min-content, max-content et fit-content sont également appelés en utilisant des dimensions intrinsèques pour définir la taille de la piste de la grille.

Fonctions disponibles dans la grille

grid-template-columns et grid-template-rows en plus d'utiliser des valeurs de longueur fixe, des valeurs dynamiques et quelques mots-clés pour définir la taille des pistes de la grille (c'est-à-dire en utilisant extrinsèque et intrinsèque dimensions pour définir les dimensions de la piste de grille). Nous pouvons également utiliser certaines fonctions de CSS Grid, telles que les fonctions minmax(min, max), repeat() et CSS (telles que les fonctions min(), max() et clamp()) pour définir la taille de la piste de la grille, et même Ces fonctions peuvent également être imbriquées les unes dans les autres.

Grille explicite et grille implicite

Une grille explicite peut être définie explicitement à l'aide de colonnes de modèle de grille, de lignes de modèle de grille et de zones de modèle de grille. De plus, vous pouvez utiliser les colonnes automatiques de grille, les lignes automatiques de grille et le flux automatique de grille pour définir une grille implicite.

Placement automatique des éléments de la grille

Dans la disposition de la grille CSS, l'utilisation de propriétés telles que la ligne de grille, la colonne de grille et la zone de grille sur les éléments de la grille peut clairement placer les éléments de la grille sur la grille à l'emplacement spécifié. De plus, la spécification de mise en page CSS Grid contient également un autre ensemble de règles pour stipuler comment les éléments de grille qui ne sont pas explicitement attribués à des positions doivent être placés. Autrement dit, utilisez grid-auto-flow pour définir le placement automatique de la grille.

Lignes de grille dans la disposition en grille

Dans le système de grille CSS, les lignes de grille sont un concept très important. Par défaut, chaque fois qu'un système de grille est défini, les noms de lignes de grille numériques (noms de lignes de grille et noms de lignes de grille de colonnes) sont créés par défaut. De plus, vous pouvez également spécifier explicitement les noms des lignes de grille entre crochets [] dans les colonnes de modèle de grille et les lignes de modèle de grille. Comme mentionné précédemment, le système de grille CSS est divisé en grille explicite et en grille implicite. De même, les lignes de grille sont également divisées en lignes de grille explicites et en lignes de grille implicites, qui sont situées sur la grille explicite. et les lignes de quadrillage situées sur la grille implicite sont appelées lignes de quadrillage implicites. Et dans le système de grille, les lignes de grille sont indispensables pour placer clairement les éléments de grille. En d'autres termes, la dénomination des lignes de grille affectera directement le placement de nos éléments de grille. Dans cet article, nous aborderons principalement avec vous comment nommer les lignes de quadrillage ? Si vous êtes intéressé, veuillez continuer à lire.

Les lignes de quadrillage sont très importantes dans les systèmes de disposition en quadrillage. Bien que le contenu précédent ne développe pas les connaissances liées aux lignes de grille dans le système de disposition de grille, il n'est pas difficile de constater que les colonnes de modèle de grille, les lignes de modèle de grille, les zones de modèle de grille, les propriétés telles que la grille- les colonnes automatiques, les lignes automatiques de grille et le flux automatique de grille créeront des lignes de grille, et la colonne de grille, la ligne de grille et la zone de grille sur les éléments de grille peuvent placer des grilles à travers les lignes de grille et s'ouvrir même. plus de possibilités lors de la création de systèmes de mise en page. Dans cette section, nous examinerons de plus près les différentes manières de nommer les grilles dans les mises en page de grille CSS, ainsi que certaines des possibilités intéressantes qui en découlent.

Placer des éléments de grille

En plus de placer automatiquement des éléments de grille dans CSS Grid (généralement à l'aide de lignes automatiques de grille, de colonnes automatiques de grille et de flux automatique de grille), vous pouvez également placer des éléments de grille sur le réseau, les éléments de grille sont placés explicitement à l'aide de lignes de grille, de colonnes de grille et de zones de grille pour définir les noms des lignes de grille.

Algorithme de placement automatique des éléments de grille

Dans la disposition de grille CSS, nous pouvons avoir de nombreuses façons de placer explicitement des éléments de grille à des emplacements spécifiés. Par exemple : 

• Utilisez Grid-row-start, Grid-row-end, Grid-column-start et Grid-column-end pour spécifier les noms des lignes de grille et placer les éléments de la grille.
• Utilisez Grid-row-start, Grid- Les propriétés d'abréviation de row-end, Grid-column-start et Grid-column-end Grid-row et Grid-column spécifient le nom de la ligne de grille et placent les éléments de la grille
• Utilisez la zone de grille pour spécifier le nom de la grille ou spécifier la grille -template Le nom de la zone de grille définie par -areas, placez l'élément de grille
• Spécifiez la grille dans Grid-row-start, Grid-row-end, Grid-column-start, Grid-column-end ou Grid-row , le nom de la ligne de la colonne de la grille et utilisez span pour spécifier les cellules de la grille fusionnées. Leur combinaison pour placer les éléments de la grille
• dans grille-ligne-début, grille-ligne-fin, grille-colonne-début, grille-colonne-fin (et leurs attributs abrégés grille-ligne, grille-colonne) ou grille- Spécifiez le nom de la ligne de grille défini par les lignes de modèle de grille, les colonnes de modèle de grille et les zones de modèle de grille dans la zone pour placer l'élément de grille
• Utilisez le nom de ligne de grille nommé et le mot-clé span pour placer l'élément de grille
• Spécifiez le nom de la zone de grille créée par des zones de modèle de grille ou des lignes de modèle de grille et des colonnes de modèle de grille dans la zone de grille, et placez les éléments de grille

Cependant, dans le système de disposition de grille, les éléments de grille Le placement a son propre ensemble d’algorithmes matures. Dans ce chapitre, nous le divisons en cinq étapes pour parler de l'algorithme de placement des éléments de la grille CSS (placement automatique et placement explicite).

Chevauchement des éléments de grille et hiérarchie de l'axe z

Les éléments de grille peuvent utiliser des attributs tels que la ligne de grille, la colonne de grille et la zone de grille pour spécifier explicitement les positions des éléments de grille en fonction des noms de lignes de grille. Cela permet aux éléments de la grille de se chevaucher. En d'autres termes, dans CSS Grid, vous pouvez utiliser les méthodes suivantes pour que les éléments de la grille se chevauchent :

• Utilisez les numéros d'index des lignes de grille
• Utilisez des lignes de grille nommées
• Utilisez des zones de grille nommées
• Fusionnez les cellules de la grille (c'est-à-dire, à travers les éléments de la grille)

Ce qui est plus intéressant, c'est que les éléments de la grille CSS n'ont pas besoin de définir explicitement la position sur une valeur non statique pour déclencher l'effet du z-index, c'est-à-dire sur le réseau. Lorsque les éléments de la grille se chevauchent, vous pouvez définir explicitement l'index z directement sur l'élément de grille pour contrôler le niveau de l'axe z de l'élément de grille.

Alignement et espacement dans la disposition en grille

Si vous êtes familier avec l'alignement dans la disposition Flexbox, alors l'alignement dans la grille CSS est facile à maîtriser. Parce qu'il est très similaire à Flexbox, les deux utilisent les fonctionnalités de la spécification CSS Box Alignment Module Niveau 3. Dans ce chapitre, l'alignement des éléments de grille et des pistes de grille dans la disposition en grille est présenté en détail. De plus, la relation entre l'alignement et la marge (comment utiliser la marge pour définir l'alignement des éléments de grille) est également présentée.

De plus, à la fin de l'article, l'attribut gap est également introduit, c'est-à-dire comment utiliser l'espace pour définir l'espacement entre les pistes de la grille (communément appelé taille de l'emplacement de la grille).

Rapport d'aspect des éléments de grille

Ce chapitre aborde principalement avec vous les paramètres du rapport d'aspect des éléments de grille, c'est-à-dire l'attribut rapport d'aspect de CSS dans l'application de grille. En outre, il introduit également padding-top ou padding-bottom ainsi que les propriétés personnalisées CSS et la fonction calc() pour obtenir le rapport hauteur/largeur des éléments de la grille.

Mode d'écriture en grille

Dans cet article, je vous parle principalement de l'impact des Propriétés logiques CSS et du Mode d'écriture CSS sur la disposition de la grille. Par exemple, la relation entre le placement automatique des éléments de grille et le mode d'écriture, la relation entre le placement des éléments de grille en fonction des lignes de grille et le mode d'écriture, et la relation entre la zone de grille et le mode d'écriture, etc.

Grilles imbriquées vs sous-grilles

Depuis un certain temps maintenant, il y a eu beaucoup de discussions sur l'utilisation des sous-grilles, comment les mettre en œuvre, et même des débats sur leur nécessité. Une grande partie de la discussion a porté sur deux autres méthodes qui traitent bon nombre des mêmes problèmes que les sous-grilles : les grilles imbriquées et l'affichage : contenu. Cet article utilise la grille imbriquée comme point d'entrée et développe en profondeur la grille imbriquée et la sous-grille, c'est-à-dire que nous comprendrons ce qui est similaire et quelles sont les différences entre la sous-grille et la grille imbriquée ? En plus d'indiquer qu'il existe des cas très efficaces où des sous-réseaux sont vraiment nécessaires, alors que dans d'autres cas, ils ne sont pas strictement nécessaires mais conduiront à une solution plus propre.

subgrid vs display: contents

subgrid Avant d'entrer dans la spécification de niveau 2 du module de mise en page CSS Grid, les grilles imbriquées, la sous-grille et l'affichage : le contenu ont été discutés en profondeur, et finalement la sous-grille a finalement reçu plus de support. est devenu partie intégrante de la norme. En d’autres termes, les grilles imbriquées et le contenu display: peuvent obtenir une disposition de type sous-grille. Dans ce chapitre, discutons avec vous de la différence entre affichage : contenu et sous-grille ?

Disposition en cascade

Étant donné que la disposition en plusieurs colonnes, la disposition Flexbox et la disposition en grille sont prises en charge par les navigateurs, vous pouvez utiliser ces fonctionnalités pour implémenter la disposition en cascade, mais la disposition en cascade implémentée par ces technologies est toute ou plus. y avoir quelques défauts. Cependant, heureusement, le module CSS Grid Layout niveau 3 intègre la véritable disposition du flux en cascade dans la spécification du W3C, qui peut être appelée une véritable disposition du flux en cascade. Malheureusement, peu de navigateurs grand public prennent en charge ce projet de spécification, seuls Firefox et Firefox Nightly. Bien que cette fonctionnalité ne soit pas encore prête pour une utilisation en production, votre essai et vos commentaires après utilisation sont précieux pour garantir qu'elle répond à vos exigences pour cette mise en page.

Inspecteur de grille pour ajuster la disposition de la grille

D'après le contenu précédent, il n'est pas difficile de trouver la complexité et la flexibilité de la disposition de la grille. Je pense que tout le monde a réalisé qu'après l'arrivée de CSS Grid, la méthode de conception de la mise en page sur le Web a également changé. Nous pouvons dessiner la mise en page sur papier et réfléchir à ce qu'est la conception de la mise en page. Lorsque vous commencez à taper du code, vous savez déjà à quoi ressemblera la mise en page. En raison de la complexité de la disposition de la grille CSS et du fait que la grille définie sur le conteneur de grille est invisible. Pour cette raison, nous devons réfléchir à la manière d'utiliser la grille plus facilement, ou à la manière de déboguer les bugs liés à la disposition de la grille. Les étudiants familiers avec le développement Web savent que lors du débogage de problèmes de mise en page ou liés au CSS, ils aiment ajouter une bordure à un élément. Dans la disposition en grille, bien que des méthodes similaires puissent être utilisées pour ajouter des bordures aux conteneurs et aux éléments de la grille afin de nous aider à les positionner rapidement, nous ne pouvons pas ajouter de bordures aux lignes de la grille. Heureusement, les navigateurs grand public actuels, tels que Chrome, Firefox, Safari et les outils de développement de navigateurs Microsoft Edge (DevTools), fournissent tous des inspecteurs de disposition de grille. Avec ces outils, nous pouvons rapidement nous aider à utiliser la grille et déboguer les problèmes rencontrés lors de l'utilisation de la grille.

Cas et fonctionnalités de mise en page de grille

L'émergence du module CSS Grid et sa prise en charge par le navigateur offrent des possibilités sans précédent pour la mise en page Web. Nous pouvons créer des conceptions plus complexes avec moins d’éléments (structure HTML plus simple). C’est bien plus puissant que Flexbox, que nous avons toujours considéré comme très puissant. Mais quand vous pensez à CSS Grid, vous pensez généralement à la disposition carrée à laquelle nous sommes habitués, n'est-ce pas ? @Andy Barefoot fournit de nombreux effets de mise en page réactifs et créatifs sur son site Web personnel et Codepen, ce qui vous donnera une toute nouvelle sensation de mise en page Web, similaire à votre conception Web classique (mise en page carrée régulière), et il utilise la mise en page CSS Grid pour fais ça.

Utilisez la construction de grille pour créer des mises en page qui se chevauchent

Dans la mise en page CSS Grid, nous pouvons placer différents éléments les uns sur les autres grâce au placement des éléments de la grille et contrôler la grille via CSS z-index L'ordre d'empilement d'éléments de grille sur l'axe z. En d'autres termes, la mise en page qui était auparavant implémentée en utilisant le positionnement absolu de la position CSS peut désormais être résolue directement en utilisant CSS Grid. Dans ce cas, nous examinons principalement comment utiliser CSS Grid pour obtenir l'effet de mise en page de superposition d'éléments.

Créez une mise en page Full-Bleed à l'aide d'une grille

Full-Bleed est un concept dans le monde de l'impression, connu sous le nom de fond perdu, c'est-à-dire qu'en impression, nous avons du fond perdu, qui est la zone au-delà de laquelle le papier est coupé. Pour cette raison, les concepteurs d’imprimés sont habitués à prendre en compte le fond perdu dans leur travail de conception. Nous faisons cela en créant des zones de sécurité. Ces dernières années, ce concept appelé « full bleed » a également été appliqué à la mise en page du Web. Il s'agit d'une mise en page qui utilise des éléments pleine largeur dans une colonne de largeur restreinte, comme une image bord à bord dans une colonne de texte plus étroite. Dans la communauté, certaines personnes appellent également cet effet de mise en page la mise en page pleine largeur, et d'autres l'appellent la mise en page Edge-To-Edge. Pour être honnête, il n'est pas difficile d'obtenir cet effet de mise en page sur le Web. Il existe de nombreuses solutions techniques différentes dans la communauté qui peuvent obtenir cet effet de mise en page. Mais aujourd’hui, nous y réfléchissons sous un angle différent !

Utiliser la grille pour créer une disposition croisée

Ce cas consiste à introduire une autre disposition de grille construite par CSS Grid, à savoir la disposition croisée. Ce cas nous aidera à mieux comprendre comment les propriétés associées de CSS Grid sont utilisées dans la pratique (mise en page Web).

Utilisez des grilles pour créer des mises en page de magazines et de journaux

Pendant longtemps, les rectangles carrés ont été utilisés pour afficher les effets d'interface utilisateur aux utilisateurs dans les mises en page Web, et c'est également le cas dans l'esprit de nombreux développeurs Web. . La disposition ne peut pas briser la restriction de la disposition rectangulaire ! Mais la vitesse de développement de la technologie Web est incroyable et de nouvelles choses apparaissent chaque jour devant nous. En quelques années seulement, de nombreuses nouvelles fonctionnalités ont été ajoutées pour la mise en page Web. En d'autres termes, si un designer vous dit aujourd'hui : « Cher, créons une mise en page similaire à celle d'un magazine ou d'un journal » ! Vous direz volontiers OK ! Autrement dit, l'utilisation des nouvelles fonctionnalités actuelles peut briser les limites du cadre rectangulaire, vous permettant ainsi d'obtenir une mise en page de type magazine sur le Web.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!