Disposition de la grille CSS: construire une disposition de site Web puissante et flexible

Points de base

• Les dispositions de grille CSS offrent un moyen plus puissant et flexible de créer des dispositions de sites Web complexes sans utiliser de propriétés telles que inline et float ou séparer les styles de styles de système de grille.
• Actuellement, seuls IE 10 et Edge prennent en charge les dispositions de grille CSS, mais il peut être activé via des drapeaux spécifiques dans Chrome et Firefox ou en utilisant du polyfill.
• Les dispositions de grille CSS utilisent des unités de mesure, des lignes, des pistes, des cellules et des régions appelées "FR" pour définir la disposition des éléments sur une page Web.
• La disposition de la grille CSS permet une séparation complète des marqueurs et des dispositions, ce qui rend CSS plus facile à entretenir et offre des possibilités infinies de conception.

sont cruciales lors de la création de sites Web complexes. L'importance des grilles dans la conception Web moderne peut être vue à partir du nombre de cadres qui implémentent les systèmes de grille pour accélérer le développement.

Avec l'introduction de la spécification de disposition de la grille CSS, vous n'avez plus besoin d'inclure une feuille de style séparée pour utiliser le système de grille. Un autre avantage est que vous n'avez plus besoin de compter sur des attributs tels que inline et float pour organiser des éléments sur la page Web. Dans ce tutoriel, nous couvrirons les bases des systèmes de grille et créerons une disposition de blog de base.

Prise en charge du navigateur

Actuellement, uniquement IE 10 et Edge Support Grid Disposouts - vous ne pouvez pas encore l'utiliser sur des sites commerciaux.

Il peut être activé dans Chrome via le "Fonctionnalités de plate-forme Web expérimentale" Indicateur dans Chrome: // Flags. Vous pouvez l'activer dans Firefox en utilisant le drapeau layout.css.grid.enabled.

Une autre option consiste à utiliser le polyfill. CSS Grid Polyfill existe! Avec les différentes options mentionnées ci-dessus, vous pouvez commencer à expérimenter la disposition de la grille et en apprendre autant que vous le pouvez quand il en est encore à ses balbutiements.

Remarque: Internet Explorer implémente actuellement les spécifications des versions plus anciennes. Malheureusement, cela signifie qu'il n'est pas entièrement compatible avec les dernières spécifications. Lorsque vous étudiez les exemples de ce tutoriel, il est recommandé d'utiliser Chrome ou Firefox avec l'indicateur correspondant activé.

Terminologie du système de grille

En termes de disposition des éléments, le système de grille CSS est similaire à une table. Cependant, il est plus puissant et flexible. Dans cette section, je discuterai de certains termes qui doivent être conscients de l'utilisation d'une grille:

fr Unité: Cette unité est utilisée pour spécifier une partie de l'espace disponible. Il est con?u pour être utilisé avec grid-rows et grid-columns. Selon la spécification -

L'espace de fraction allouant se produit après tout après tout "la longueur" des lignes de ligne et des colonnes basées sur le contenu atteint leur maximum.

ligne: les lignes définissent les limites des autres éléments. Ils courent verticalement et horizontalement. Dans la figure ci-dessous, il y a quatre lignes verticales et quatre lignes horizontales.

Route: La piste est l'espace entre les lignes parallèles. Dans la figure ci-dessous, il y a trois pistes verticales et trois pistes horizontales.

Cell: Les cellules sont les éléments constitutifs de base de la grille. Dans la figure ci-dessous, il y a neuf cellules au total.

Zone: La zone est une forme rectangulaire avec un certain nombre de cellules. Par conséquent, la track est une zone , et la cell est également une zone .

éléments de position dans la grille

Commen?ons par les bases. Dans cette section, je vais vous apprendre à utiliser une grille pour localiser des éléments à des emplacements spécifiques. Pour utiliser la disposition de la grille CSS, vous avez besoin d'un élément parent et d'un ou plusieurs enfants. Pour la démonstration, nous utiliserons la balise suivante comme système de grille:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

Après avoir terminé la balise, vous devez appliquer display: grid ou display: inline-grid sur l'élément parent, comme indiqué ci-dessous:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

grid-template-columns et grid-template-rows sont utilisées pour spécifier la largeur de diverses lignes et colonnes. Dans l'exemple ci-dessus, j'ai défini cinq colonnes. La colonne 10px agit comme des emplacements pour fournir l'espacement requis entre les éléments. La première colonne a une largeur de 200px. La troisième colonne occupe la partie 0,3 de l'espace restant. De même, la cinquième colonne occupe la partie 0,7 de l'espace restant.

Utiliser grid-template-rows pour la première ligne dans auto pour permettre à la ligne de se développer en fonction de son contenu interne. 20px La ligne agit comme une fente.

à ce stade, les éléments sont étroitement disposés, comme le montre la démonstration suivante. (Le lien de démonstration de codepen est omis ici)

Observez que l'élément B est situé dans la deuxième colonne que nous prévoyons d'utiliser comme emplacement. Si vous ne spécifiez pas l'emplacement des éléments enfants dans la grille, le navigateur place un élément dans chaque cellule jusqu'à ce que la première ligne soit complètement remplie et que le reste passe à la ligne suivante. C'est pourquoi il nous reste quatre colonnes de rechange dans la deuxième ligne.

Pour déplacer des éléments vers des cellules spécifiques de la grille, vous devez spécifier leur emplacement dans CSS. Avant d'expliquer comment déplacer les éléments à l'aide d'un système de grille, consultez l'image ci-dessous. (Le lien d'image est omis ici)

Dans ce cas, nous utiliserons le "placement basé sur la ligne". Le placement basé sur la ligne signifie que les lignes de notre système de grille serviront de guide pour le placement et la limitation des éléments. Prenons l'élément B comme exemple. Dans la direction horizontale, il commence à partir de la colonne 3 et se termine à partir de la colonne 4. Sur l'axe vertical, il est situé entre la ligne 1 et la ligne 2.

Nous utilisons grid-column-start pour spécifier la ligne verticale de démarrage de l'élément. Dans ce cas, il sera défini sur 3. grid-column-end Indique la ligne verticale finale de l'élément. Dans ce cas, cette propriété sera égale à 4. Les valeurs de ligne correspondantes seront définies de manière similaire.

Compte tenu de tout ce qui précède, pour déplacer l'élément B vers la deuxième cellule, vous utiliserez le CSS suivant:

<div class="grid-container">
  <div class="grid-element item-a">A</div>
  <div class="grid-element item-b">B</div>
  <div class="grid-element item-c">C</div>
  <div class="grid-element item-d">D</div>
  <div class="grid-element item-e">E</div>
  <div class="grid-element item-f">F</div>
</div>

De même, pour déplacer l'élément F vers la sixième cellule, vous utiliserez le CSS suivant:

.grid-container {
  display: grid;
  grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
  grid-template-rows: auto 20px auto;
}

Après avoir apporté ces modifications à CSS, les éléments doivent être correctement espacés comme dans cette démo. (Le lien de démonstration de codepen est omis ici)

Créer une disposition de base

Il est temps de créer une disposition de blog de base. Le blog aura un en-tête, un pied de page, une barre latérale et deux sections pour le contenu réel. Commen?ons par le marqueur:

.element-b {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}

N'oubliez pas que l'ordre des éléments dans les balises n'affecte pas la position des éléments sur la page Web. Tant que vous ne modifiez pas le CSS, vous pouvez placer le pied de page au-dessus de l'en-tête dans la balise, et la position des éléments sur la page Web ne change pas. Bien s?r, je ne recommande pas cela. Le point est: votre marqueur ne déterminera plus l'emplacement de l'élément.

Ce que nous devons faire maintenant, c'est déterminer les valeurs du grid-row-end et d'autres attributs de divers éléments. Tout comme dans le dernier exemple, nous utiliserons le graphique de la grille pour déterminer les valeurs de toutes les propriétés de la grille. (Le lien d'image est omis ici)

Comme indiqué dans la figure ci-dessus, l'en-tête passe de la colonne 1 à la colonne 4, et de la ligne 1 à la ligne 2. Cela devrait ressembler à ceci:

.element-f {
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

De même, "Extra" passe de la colonne 3 à la colonne 4, et de la ligne 5 à la ligne 6. Le CSS serait donc:

<div class="grid-container">
  <div class="grid-element header">Header</div>
  <div class="grid-element sidebar">Sidebar</div>
  <div class="grid-element main">Main Content</div>
  <div class="grid-element extra">Extra Info</div>
  <div class="grid-element footer">Footer</div>
</div>

Les propriétés de la grille de tous les autres éléments peuvent désormais être facilement déterminées. Consultez la démonstration du codePen et expérimentez avec diverses valeurs de grille pour mieux comprendre le placement basé sur la ligne. (Le lien de démonstration de codepen est omis ici)

Conclusion

Les spécifications de disposition de la grille CSS nous permettent de créer facilement des dispositions complexes. Le CSS que nous devons écrire est plus simple et plus facile à entretenir. Lors de la création de dispositions complexes dans la conception, nous n'avons plus besoin d'utiliser float ou d'autres attributs de ce type. Un autre avantage énorme est la séparation complète du marquage et de la disposition. Avec la disposition de la grille CSS, les possibilités sont infinies.

Si vous avez des questions sur ce tutoriel, veuillez me le faire savoir dans les commentaires.

FAQ sur la disposition de la grille CSS

En quoi la disposition de la grille CSS est-elle différente des autres méthodes de disposition CSS?

La disposition de la grille CSS est un système de disposition bidimensionnel différent des autres méthodes de disposition CSS telles que Flexbox, qui est unidimensionnelle. Cela signifie qu'avec la grille CSS, vous pouvez contr?ler les dispositions horizontales et verticales, ce que d'autres méthodes ne peuvent pas faire. Il est con?u pour gérer des conceptions plus complexes et de grandes dispositions. Il est également plus flexible et puissant, ce qui permet un design plus créatif et plus fin.

Comment démarrer avec les dispositions de grille CSS?

Pour commencer à utiliser la disposition de la grille CSS, vous devez définir l'attribut display de l'élément à grid ou inline-grid. Cela fait de l'élément un récipient de grille et de ses éléments enfants un élément de grille. Vous pouvez ensuite utiliser diverses propriétés de maillage pour définir la disposition du maillage et l'emplacement des éléments en filet.

Puis-je utiliser la disposition de la grille CSS avec d'autres méthodes de disposition CSS?

Oui, les dispositions de grille CSS peuvent être utilisées conjointement avec d'autres méthodes de disposition CSS. Par exemple, vous pouvez utiliser Flexbox pour les composants de votre site Web et la grille CSS pour la mise en page globale. Cela vous permet de profiter de chaque approche de mise en page.

Comment créer une grille en utilisant la disposition de la grille CSS?

Pour créer une grille à l'aide d'une disposition de grille CSS, vous devez d'abord définir le conteneur de grille en définissant l'attribut display de l'élément à grid ou inline-grid. Vous pouvez ensuite utiliser les propriétés grid-template-columns et grid-template-rows pour définir le nombre et la taille des colonnes et des lignes dans la grille.

Comment placer un article sur une grille?

Vous pouvez utiliser les propriétés grid-column et grid-row pour placer des éléments sur la grille. Ces propriétés vous permettent de spécifier les lignes de début et de fin du projet, la pla?ant efficacement dans une cellule ou une cellule spécifique de la grille.

Que sont les lignes de grille et les pistes de grille?

Dans la disposition de la grille CSS, les lignes de grille sont des diviseurs qui composent la structure de la grille. Leurs nombres commencent à 1 et les numéros de ligne sont incrémentés de haut en bas et de gauche à droite. Une piste de grille est l'espace entre deux lignes de grille adjacentes, qui peuvent être une colonne ou une ligne.

Quelle est l'unité fr dans la disposition de la grille CSS?

L'unité fr dans la disposition de la grille CSS représente le "score". Il représente une partie de l'espace disponible dans le récipient de grille. Par exemple, si vous avez une grille avec trois colonnes et définissez la largeur d'une colonne à 1fr et les deux autres colonnes à 2fr, la première colonne occupera un tiers de l'espace disponible, et l'autre les deux Les colonnes occuperont chacune un tiers.

Comment rendre la grille réactive?

Pour rendre la grille réactive, vous pouvez utiliser des requêtes multimédias avec des propriétés grid-template-columns et grid-template-rows. Vous pouvez également utiliser les mots clés auto-fill et auto-fit avec les fonctions repeat pour ajuster automatiquement le nombre et la taille des colonnes et des lignes en fonction de la taille de la fenêtre.

Puis-je nicher ma grille dans ma grille?

Oui, vous pouvez nicher les grilles dans une disposition de la grille CSS. Cela signifie que vous pouvez faire du projet de grille lui-même un conteneur de grille, créant des dispositions imbriquées complexes.

Les dispositions de grille CSS sont-elles prises en charge par tous les navigateurs?

Tous les navigateurs modernes (y compris Chrome, Firefox, Safari et Edge) prennent en charge les dispositions de grille CSS. Cependant, Internet Explorer ne le prend pas en charge. Par conséquent, il est important de fournir des dispositions alternatives pour les utilisateurs qui utilisent des navigateurs non pris en charge.

Veuillez noter que comme je ne peux pas accéder aux sites Web et à des images externes, je ne peux pas afficher directement les images. Veuillez vous assurer que le lien de l'image est ajouté correctement à votre sortie finale.

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!