Comprendre la disposition de la grille en un seul article

Quelle est la disposition de la grille?

GridCette disposition de la grille de mise en page, est un nouveau CSSmodèle de mise en page, mieux à une page est divisée en plusieurs zones principales, ainsi que définir la taille de ces régions, la position, le niveau et d'autres relations. Prétend être le plus puissant de la CSSmise en page du programme, est actuellement la seule CSSmise en page en deux dimensions. Utilisez la Gridmise en page, nous pouvons facilement réaliser la mise en page suivante, l' adresse de démonstration

Disposition en grille et disposition flexible

Parlé de la mise en page, nous penserons à flexla mise en page, et même suggéré que autant que la flexmise en page, et il semble qu'il n'y ait pas besoin de connaître Gridla mise en page. Cependant, flexla mise en page et Gridla mise en page présentent une différence substantielle, c'est-à-dire que flexla mise en page est unidimensionnelle, Gridla mise en page est une mise en page en deux dimensions . flexLa mise en page ne peut gérer la mise en page des éléments que dans une dimension à la fois, une ligne ou une colonne. GridLa mise en page consiste à diviser le conteneur en "lignes" et "colonnes" pour produire une grille. Nous pouvons placer les éléments de la grille dans des positions liées à ces lignes et colonnes pour atteindre notre objectif de mise en page.

GridMise en page que la flexmise en page du fort!

Exemple de disposition flexible:

Exemple de disposition de grille:

Quelques concepts de base de Grid

Nous utilisons Grid pour implémenter un petit exemple pour démontrer quelques concepts de base de Grid et démontrer l'adresse

<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
</div>
复制代码

.wrapper {
  margin: 60px;
  
  display: grid;
  
  grid-template-columns: repeat(3, 200px);
  
  grid-gap: 20px;
  
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
复制代码

Conteneur et projet: Nous déclarons sur les éléments display：gridou display：inline-gridpour créer un conteneur maillé. Une fois que nous faisons cela, tous les enfants immédiats de cet élément deviendront des éléments de la grille. Tels que les .wrapperéléments ci-dessus comme une grille où le conteneur sera des éléments de grille d'élément enfant immédiat.

Grille de suivi: grid-template-columnset grid-template-rowsattributs pour définir une grille de lignes et de colonnes. Les zones horizontales à l'intérieur du conteneur sont appelées lignes et les zones verticales sont appelées colonnes. La figure ci - dessus One, Two, Threela composition de la Onerangée, Fourest un

Unité de grille: une unité de grille est la plus petite unité d'un élément de grille. Conceptuellement, elle est en fait très similaire à une cellule d'un tableau. La figure ci - dessus One, Two,, Three... Fourest l' une des unités de grille

Ligne de grille: La ligne qui divise la grille, appelée «ligne de grille». Il convient de noter que lorsque nous définissons une grille, nous définissons une piste de grille, pas une ligne de grille. Grid créera des lignes de quadrillage numérotées pour nous permettre de localiser chaque élément de la grille. La colonne m a m + 1 lignes de grille verticales, et la ligne n a n + 1 et lignes de grille horizontales. Par exemple, dans l'exemple ci-dessus, il y a 4 lignes de quadrillage verticales. De manière générale, les nombres sont triés de gauche à droite, de haut en bas, 1, 2 et 3. Bien sûr, vous pouvez également trier les nombres de droite à gauche, de bas en haut, dans l'ordre de -1, -2, -3 ...

Introduction aux propriétés des conteneurs

GridDe nombreux attributs et valeurs liés à la mise en page nécessitent beaucoup de mémoire, il est recommandé de les democombiner ensemble, de comprendre le côté code, puis d'utiliser un peu de temps libre pour s'en souvenir. Je vais présenter chaque attribut quand il s'agit d'une petite demodémonstration, je suggère que vous puissiez modifier leur propre regard sur l'effet pour améliorer la mémoire

GridLes attributs de mise en page peuvent être divisés en deux catégories, l'une est les attributs de conteneur et l'autre est les attributs d'élément. Regardons d'abord les propriétés du conteneur

attribut d'affichage

afficher la démo de la propriété

Par une déclaration sur les éléments display：gridou display：inline-gridpour créer un conteneur maillé. Déclarer que display：gridle navire est un élément de bloc, à condition que display: inline-gridl'élément de ligne dans l'élément de conteneur

.wrapper {
  display: grid;
}
复制代码

.wrapper-1 {
  display: inline-grid;
}
复制代码

propriété grid-template-columns et propriété grid-template-rows

Adresse de démonstration des propriétés grid-template-columns et grid-template-rows

grid-template-columnsDéfinition des propriétés de largeur de colonne, grid-template-rowsligne de propriété élevée, ces deux attributs Gridparticulièrement importants dans la mise en page, leurs valeurs sont diverses, mais leur disposition est plus similaire, pour ce qui suit grid-template-columnspour expliquer les propriétés

Largeur de colonne et hauteur de ligne fixes

.wrapper {
  display: grid;
  
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  
  grid-template-rows: 50px 50px;
}
复制代码

Ce qui précède signifie que la largeur de colonne fixe est de 200 px 100 px 200 px et la hauteur de ligne est de 50 px 50 px

Fonction repeat () : peut simplifier les valeurs répétées. Cette fonction accepte deux paramètres, le premier paramètre est le nombre de répétitions et le second paramètre est la valeur à répéter. Par exemple, les hauteurs de ligne ci-dessus sont toutes les mêmes, nous pouvons y parvenir, l'effet réel est exactement le même

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}
复制代码

Mot-clé de remplissage automatique: indique le remplissage automatique, afin que le plus de cellules possible puissent être logées dans une ligne (ou une colonne). grid-template-columns: repeat(auto-fill, 200px)Indique que la largeur de la colonne est de 200 px, mais que le nombre de colonnes n'est pas fixe. Tant que le navigateur peut l'adapter, vous pouvez placer des éléments. Le code et l'effet sont illustrés dans la figure suivante:

.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

fr Mots - clés : La Gridmise en page introduit également une unité de longueur supplémentaire pour nous aider à créer des pistes de grille flexibles. frL'unité représente une partie égale de l'espace disponible dans le conteneur de grille. grid-template-columns: 200px 1fr 2frIndique que la largeur de la première colonne est fixée à 200 px et que la largeur restante est divisée en deux parties, les largeurs sont respectivement 1/3 et 2/3 de la largeur restante. Le code et l'effet sont indiqués dans la figure ci-dessous:

.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Fonction minmax () : nous voulons parfois donner à l'élément de grille une taille minimale et maximale. La minmax()fonction génère une plage de longueur, ce qui signifie que la longueur peut être appliquée au projet de grille dans cette plage. Il accepte deux paramètres, minimum et maximum. grid-template-columns: 1fr 1fr minmax(300px, 2fr)Signifie que la largeur de la troisième colonne est d'au moins 300 pixels, mais que le maximum ne peut pas être supérieur à deux fois la largeur des première et deuxième colonnes. Le code et l'effet sont les suivants:

.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Mot - clé auto : la longueur est déterminée par le navigateur. Par automot-clé, nous pouvons facilement réaliser une mise en page en trois ou deux colonnes. grid-template-columns: 100px auto 100pxIndique que les première et troisième colonnes font 100 pixels et que la longueur est déterminée par le navigateur. Le code et l'effet sont les suivants:

.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

propriété grid-row-gap, propriété grid-column-gap et propriété grid-gap

Attribut Grid-row-gap, attribut grid-column-gap et adresse de démonstration de l'attribut grid-gap

grid-row-gapLes attributs et les grid-column-gapattributs définissent respectivement l'espacement des lignes et des colonnes. grid-gapL'attribut est une forme courte des deux.

grid-row-gap: 10pxIndique que l'espacement des lignes est de 10 pixels et grid-column-gap: 20pxque l'espacement des colonnes est de 20 pixels. grid-gap: 10px 20pxL'effet obtenu est le même

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}
复制代码

Les deux méthodes d'écriture ci-dessus ont le même effet.

zones de modèle de grille 属性

adresse de démonstration grid-area et grid-template-areas

grid-template-areas Les attributs sont utilisés pour définir des zones, et une zone est composée d'une ou plusieurs cellules

Général Cette propriété avec des éléments de maillage grid-areautilisés ensemble, nous sommes ici pour la présenter ensemble. grid-areaL'attribut spécifie dans quelle zone l'élément est placé

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}
复制代码

Le code ci-dessus est divisé en 6 représentant des cellules, ce qui vaut la peine de noter que le .symbole représentant la cellule vide, c'est-à-dire que la cellule n'est pas utilisée.

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}
复制代码

Le code ci-dessus montre qu'un .sidebar .content .headerélément de classe est situé au-dessus grid-template-areasde la sidebar content headerzone définie

propriété grid-auto-flow

adresse de démonstration de la propriété grid-auto-flow

grid-auto-flowLes attributs contrôlent le fonctionnement de l'algorithme de mise en page automatique, spécifiant précisément comment les éléments qui sont automatiquement disposés dans la grille sont organisés. L'ordre par défaut est placé « de la première ligne », à savoir pour remplir la première ligne, ensuite dans la deuxième ligne commence, à savoir la séquence alphanumérique dans la figure one, two, three.... L'ordre par la grid-auto-flowpropriété détermine que la valeur par défaut est row.

.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Les élèves attentifs peuvent avoir trouvé un problème, c'est-à-dire qu'il y a un écart entre le cinquième élément et le sixième élément (comme indiqué dans la figure ci-dessous). En effet, la longueur du sixième bloc est supérieure à la longueur du blanc, et il a été pressé vers le bas. Causé par une ligne. Dans les applications pratiques, nous pouvons souhaiter que la longueur suivante remplisse ce blanc avec une longueur appropriée. Cette durée peut être réglée grid-auto-flow: row densepour remplir le formulaire autant que possible. Le code et l'effet sont les suivants:

.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}
复制代码

Il peut être défini grid-auto-flow: column, indiquant que la première colonne est suivie de la ligne, le code et l'effet sont indiqués dans la figure suivante:

.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}
复制代码

attribut justify-items, attribut align-items et attribut place-items

Attribut Justify-items, adresse de démonstration de l'attribut align-items

justify-itemsLa propriété définit la position horizontale du contenu de la cellule (gauche, centre, droite) et la align-itemspropriété définit la position verticale de la cellule (haut, milieu, bas)

Ce qui suit prend l'attribut justify-items comme exemple pour expliquer, l'attribut align-items est le même, mais la direction est verticale. Ils ont tous les attributs suivants:

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
复制代码

L'implémentation et les effets du code sont les suivants:

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}
复制代码

• start: aligner le bord de départ de la cellule

• end: alignez le bord final de la cellule

• center: centrer l'intérieur de la cellule

• étirer: étirer pour occuper toute la largeur de la cellule (valeur par défaut)

attribut justify-content, attribut align-content et attribut place-content

Attribut Justify-content, adresse de démonstration de l'attribut align-content

justify-contentL'attribut est la position horizontale de toute la zone de contenu dans le conteneur (gauche, centre, droite) et l' align-contentattribut est la position verticale de toute la zone de contenu (haut, milieu et bas). Ils ont tous les valeurs d'attribut suivantes.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
复制代码

Dans la justify-contentpropriété suivante à titre d'exemple pour expliquer, align-contentattribut De même, seule la direction est la direction verticale

• start-aligner la bordure de départ du conteneur
• aligner l'extrémité de la bordure d'extrémité du conteneur
• centre-le centre du conteneur

.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}
复制代码

• espace-autour-L'espace des deux côtés de chaque élément est égal. Par conséquent, l'espace entre les éléments est deux fois plus grand que l'espace entre les éléments et la bordure du conteneur
• l'espace entre l'élément et l'élément est égal, il n'y a pas d'espace entre l'élément et la bordure du conteneur
• espace-uniformément-l'espace entre l'élément et l'élément est égal, et l'espace entre l'élément et la bordure du conteneur est de la même longueur
• stretch-lorsque la taille de l'élément n'est pas spécifiée, l'étirement occupe tout le conteneur de la grille

.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}
复制代码

propriété grid-auto-columns et propriété grid-auto-rows

adresse de démonstration de la propriété grid-auto-columns et de la propriété grid-auto-rows

En parlant de grid-auto-columnspropriété et de propriété grid-auto-rowsantérieure, jetez un œil au concept de grille implicite et d'affichage

Implicite et afficher la grille : la grille explicitement contenue dans votre grid-template-columnset grid-template-rowsrangée et des attributs de colonne sont définis. Si vous mettez quelque chose en dehors de la définition de la grille, ou si vous avez besoin de plus de pistes de grille en raison de la quantité de contenu, la grille créera des lignes et des colonnes dans la grille implicite

Si une grille supplémentaire (c'est-à-dire une grille implicite mentionnée ci-dessus), sa largeur de colonne et sa hauteur de ligne peuvent grid-auto-columnspropriété et grid-auto-rowsparamètres de propriété. Et leur libellé grid-template-columnset grid-template-rowsla même chose. Si vous ne spécifiez pas ces deux attributs, le navigateur déterminera la largeur de colonne et la hauteur de ligne de la nouvelle grille en fonction de la taille du contenu de la cellule.

.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;

  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

grid-template-columnsLes attributs et grid-template-rowsattribut ne spécifient que deux lignes et deux colonnes, mais en réalité il y a neuf éléments, il aura une grille implicite. Par grid-auto-rowsêtre spécifié implicitement 50px hauteur des lignes de la grille

Présentation des attributs du projet

propriété grid-column-start, propriété grid-column-end, propriété grid-row-start et propriété grid-row-end

Adresse de démonstration

Vous pouvez spécifier les quatre bordures où se trouve l'élément de la grille et la ligne de la grille à localiser respectivement, afin de spécifier la position de l'élément

• propriété grid-column-start: la ligne de grille verticale où se trouve la bordure gauche
• propriété grid-column-end: la ligne de grille verticale où se trouve la bordure droite
• propriété grid-row-start: la ligne de quadrillage horizontale où se trouve la bordure supérieure
• propriété grid-row-end: la ligne de quadrillage horizontale où se trouve la bordure inférieure

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19CAAD;
}
.two { 
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  
  z-index: 1;
  background: #8CC7B5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #D1BA74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #BEE7E9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #E6CEAC;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ECAD9E;
}
复制代码

Dans le code ci-dessus, le .twoprojet de grille de classe est situé, les lignes de grille verticales vont de 2 à 4, les lignes de grille horizontales sont de 1-2. Parmi eux, il entre en .threeconflit avec (les lignes de grille verticales vont de 3 à 4 et les lignes de grille horizontales sont de 1 à 4). Vous pouvez définir z-indexpour décider de leur hiérarchie

propriété grid-area

grid-areaAttribut spécifie le projet dans une région qui, dans l'introduction ci grid-template-areas- dessus , lorsqu'il est mentionné, il n'y a plus d'expansion spécifique, l'utilisation de référence spécifique peut démontrer Adresse:

adresse de démonstration des propriétés grid-area et grid-template-areas

attribut justify-self, attribut align-self et attribut place-self

attribut justify-self / attribut align-self / adresse de démonstration de l'attribut place-self

justify-selfPropriété du contenu de la cellule de la position horizontale (gauche, droite), avec justify-itemsl'utilisation de la propriété exactement la même, mais n'agit que sur un seul projet

align-self La propriété définit la position verticale du contenu de la cellule (supérieure, moyenne et inférieure), qui est exactement la même que l'utilisation de la propriété align-items, et elle n'affecte qu'un seul élément

Les deux sont très similaires, ne prennent ici que l' justify-selfattribut de présentation d' align-selfattribut De même, n'agissant que dans une direction verticale

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
复制代码

.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}
复制代码

• start: aligner le bord de départ de la cellule

• end: alignez le bord final de la cellule

• center: centrer l'intérieur de la cellule

  

• étirer: étirer pour occuper toute la largeur de la cellule (valeur par défaut)

  

Grille Disposition réactive de combat réel

Après l'introduction ci-dessus, je pense que tout le monde peut voir que Grid est très puissant. Certaines mises en page CSS courantes, telles que la mise en page centrée sur deux colonnes, la mise en page sur trois colonnes, etc., sont faciles à implémenter. Jetons un coup d'œil à la façon dont la disposition en grille implémente la disposition réactive

fr réalise une réponse de division égale

fr réalise une réponse de division égale

frL'unité de division égale, qui peut diviser l'espace disponible du conteneur en autant d'espaces de division égale que vous le souhaitez. En utilisant cette fonctionnalité, nous pouvons facilement implémenter une réponse également divisée. grid-template-columns: 1fr 1fr 1frIndique que le conteneur est divisé en trois parties égales

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

répéter + ajustement automatique —— fixer la largeur de la colonne et modifier le nombre de colonnes

La mise en page des aliquots n'est pas la seule Gridmise en page, comme la flexmise en page peut être facilement réalisée, alors regardez une réactivité plus avancée

L'exemple ci-dessus est toujours à trois colonnes, mais nous voulons souvent que notre grille puisse fixer la largeur de la colonne et modifier le nombre de colonnes en fonction de la largeur du conteneur. Cette fois, nous pouvons utiliser les repeat()fonctions et auto-fitmots - clés mentionnés ci-dessus . grid-template-columns: repeat(auto-fit, 200px)Indique que la largeur de colonne fixe est de 200 pixels et que le nombre est adaptatif. Tant qu'il peut être adapté, il sera organisé vers le haut. Le code et les effets sont implémentés comme suit:

Adresse de démonstration

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

répéter + auto-ajustement + minmax retirer le blanc à droite

Dans l'effet vu ci-dessus, il y a généralement un blanc sur le côté droit, ce que nous ne voulons pas voir. Ce serait formidable si la largeur de la colonne peut également être adaptative dans une certaine plage. minmax()La fonction nous aide à le faire. Le grid-template-columns: repeat(auto-fit, 200px)changement grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))indique que la largeur de colonne d'au moins 200 px, s'il y a une aliquote de rechange ensemble. Le code et l'effet sont les suivants:

Adresse de démonstration

.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
复制代码

répéter + auto-ajustement + minmax-span-dense résoudre le problème de la vacance

Tout semble aller bien, mais un jour UI, la longueur de chaque élément de la grille peut ne pas être la même, ce qui est simple, en spanexécutant la durée pour définir les mots grid-column-start: span 3- clés du projet de grille , indiquant que la durée du projet 3 Grid. Le code et l'effet spécifiques sont les suivants:

.item-3 {
  grid-column-start: span 3;
}
复制代码

Adresse de démonstration

Non, pourquoi y a-t-il un espace vide sur le côté droit? Il y a une certaine longueur d'origine est trop longue, on ne peut pas lâcher prise, cette fois à notre denseclé de jeu. grid-auto-flow: row denseMoyens de remplir autant que possible, sans laisser de blancs, le code et l'effet sont les suivants:

.wrapper, .wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}
复制代码

Compatibilité de la disposition de la grille

Enfin, parlez de Gridla disposition des problèmes de compatibilité, dans caniuse , nous pouvons voir les résultats comme suit, la compatibilité globale est également bonne, mais non prise en charge dans IE 10 ou moins. La suggestion personnelle n'est pas un problème à utiliser dans le système interne de l'entreprise, mais la table des matières peut ne pas convenir pour le moment