Explication détaillée de l'utilisation de la disposition de la grille CSS (grid)-tutoriel CSS-php.cn

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

不言

Libérer： 2018-11-14 15:10:52

original

4465 Les gens l'ont consulté

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行高);
    }

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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: （行方向的网格的开始位置）/（行方向的网格的结束位置);
    }

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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;

Copier après la connexion

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;
}

Copier après la connexion

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>

Copier après la connexion

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)