Maison > Article > interface Web > Explication détaillée de l'utilisation de la disposition de la grille CSS (grid)

Explication détaillée de l'utilisation de la disposition de la grille CSS (grid)

不言original: 2018-11-14 15:10:524478parcourir

Il existe différentes mises en page dans les pages Web, et une mise en page appropriée peut rendre la page Web plus belle. Grâce à la mise en page en grille CSS, vous pouvez créer des colonnes complexes en utilisant une mise en page en grille avec des descriptions simples. Dans cet article, nous présentons la disposition en grille de CSS sur la base d'un exemple simple.

Jetons d'abord un coup d'oeil au framework de conteneur

#(id名){
    display: grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);    
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

.(class名){
    display: grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

Il existe également un moyen de mettre en place un intranet grille.

#(id名){
    display: inline-grid;    
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
      grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

.(class名){
    display: inline-grid;     
    grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);  
    grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
    }

Cadre de grille (cadre de projet)

Spécifiez le CSS suivant pour l'élément qui devient le cadre de grille.

#(id名){
    grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;   
    grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

.(class名){
   grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;   
    grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

#(id名){
    grid-column-start: (列方向的网格的开始位置);    
        grid-column-end: (列方向的网格的结束位置);    
        grid-row-start: (行方向的网格的开始位置);    
        grid-row-end: (行方向的网格的结束位置);
        }

.(class名){
          grid-column-start: (列方向的网格的开始位置);    
          grid-column-end: (列方向的网格的结束位置);    
          grid-row-start: (行方向的网格的开始位置);    
          grid-row-end: (行方向的网格的结束位置);
        }

Exemple de description

Utilisez les lignes de la grille pour spécifier les positions de début et de fin de la grille.

Dans le cas du code ci-dessous, la largeur de la cellule va de la ligne verticale de la deuxième grille à la ligne verticale de la quatrième grille.

 grid-column: 2 / 4;

Exemple de code

Créez les fichiers CSS et HTML suivants.

SimpleGrid.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}
.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 3 / 4;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}
.GridItem4 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #b0ff70;
}
.GridItem5 {
    grid-column: 1 / 2;    
    grid-row: 2 / 3;    
    background-color: #7ee68d;
}
.GridItem6 {
    grid-column: 2 / 3;    
    grid-row: 2 / 3;    
    background-color: #7ee6e2;
}
.GridItem7 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color:#95a7f5
    }
.GridItem8 {
    grid-column: 4 / 5;    
    grid-row: 2 / 3;    
    background-color: #d095f5;
}

SimpleGrid.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGrid.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
    <div class="GridItem4">内容4</div>
    <div class="GridItem5">内容5</div>
    <div class="GridItem6">内容6</div>
    <div class="GridItem7">内容7</div>
    <div class="GridItem8">内容8</div>
  </div>
  </body>
  </html>

Instructions :

La description CSS suivante du conteneur crée un Grille de 4 rangées × 2 rangées.

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border:solid #ff6a00 1px;
}

Le CSS de chaque élément de la grille sera (GridItem 1~GridItem 8). Nous définissons des cellules de grille pour chaque grille. Changez la couleur d'arrière-plan de chaque cellule de la grille.

.GridItem1 {
    grid-column: 1 / 2;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}

Afficher les résultats

Utilisez le navigateur Firefox pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché. Créez une grille de 2 lignes sur 4 colonnes et affichez la chaîne « élément n » dans chaque cellule. De plus, la couleur d'arrière-plan de la cellule peut être définie pour chaque cellule.

Explication détaillée de lutilisation de la disposition de la grille CSS (grid)

De même, le même fichier est affiché dans Google Chrome. L'effet illustré ci-dessous sera affiché.

Explication détaillée de lutilisation de la disposition de la grille CSS (grid)

L'affichage de la grille ne peut pas être complété dans le navigateur IE et l'affichage est réduit.

Exemple d'absence de cellule dans toutes les grilles

Alors que l'exemple précédent présente le cas où il existe une option pour toutes les grilles d'une cellule, cela fonctionnera même le cas échéant projet dans toutes les grilles. Vous trouverez ci-dessous un exemple de cellules clairsemées (discrètes) dans une grille.

Code

Créez les fichiers CSS, HTML suivants.

SimpleGridSparse.css

.Container {
    display: grid;    
    grid-template-columns: 160px 160px 160px 160px;    
    grid-template-rows: 120px 120px;    
    border: solid #ff6a00 1px;    
    background-color:#E0E0E0;
}
.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

SimpleGridSparse.html

<!DOCTYPE html><html><head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="SimpleGridSparse.css" />
  </head>
  <body>
  <div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>
  </body>
  </html>

Description :

Grâce au code suivant, le cadre extérieur de la grille est une grille de 2 lignes × 4 colonnes.

 display: grid;  
 grid-template-columns: 160px 160px 160px 160px;  
 grid-template-rows: 120px 120px;

Le CSS pour la partie cellule de la grille est le suivant. Cette fois, il s'agit d'une grille 2×4 à 8 cellules, mais nous n'y avons disposé que 3 cellules. Encadrez le conteneur dans la première ligne de la deuxième colonne, la deuxième ligne de la cellule dans la troisième colonne et encadrez le contenu à trois endroits dans la première ligne de la cellule de la quatrième colonne.

.GridItem1 {
    grid-column: 2 / 3;    
    grid-row: 1 / 2;    
    background-color: #ff9c9c;
}
.GridItem2 {
    grid-column: 3 / 4;    
    grid-row: 2 / 3;    
    background-color: #ffcb70;
}
.GridItem3 {
    grid-column: 4 / 5;    
    grid-row: 1 / 2;    
    background-color: #fffd70;
}

La partie HTML de la grille. Décrit trois cadres div dans un cadre de grille.

<div class="Container">
    <div class="GridItem1">内容1</div>
    <div class="GridItem2">内容2</div>
    <div class="GridItem3">内容3</div>
  </div>

Afficher les résultats

Nous afficherons le code HTML ci-dessus dans le navigateur Firefox. L'effet illustré ci-dessous sera affiché. Le cadre de contenu est placé à l'emplacement spécifié par CSS.

Explication détaillée de lutilisation de la disposition de la grille CSS (grid)

L'effet affiché dans Google Chrome est le suivant.

Explication détaillée de lutilisation de la disposition de la grille CSS (grid)

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!

firefox css chrome html 字符串

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Qu’est-ce que le positionnement CSS ? Comment utiliser le positionnement CSSArticle suivant：Qu’est-ce que le positionnement CSS ? Comment utiliser le positionnement CSS

Articles Liés

Voir plus