Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)-CSS-Tutorial-php.cn

Es gibt verschiedene Layouts auf Webseiten, und ein geeignetes Layout kann die Webseite schöner machen. Mit dem CSS-Rasterlayout können Sie komplexe Spalten mithilfe eines Rasterlayouts mit einfachen Beschreibungen erstellen. In diesem Artikel stellen wir das Grid-Layout von CSS anhand eines einfachen Beispiels vor.

Werfen wir zunächst einen Blick auf das Container-Framework

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

Es gibt auch eine Möglichkeit, ein Intranet-Grid einzurichten.

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

Rasterrahmen (Projektrahmen)

Geben Sie das folgende CSS für das Element an, das zum Rasterrahmen wird.

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

Beschreibungsbeispiel

Verwenden Sie net Rasterlinien geben die Start- und Endpositionen des Rasters an.

Im Fall des folgenden Codes reicht die Breite der Zelle von der vertikalen Linie des zweiten Rasters bis zur vertikalen Linie des vierten Rasters.

 grid-column: 2 / 4;

Nach dem Login kopieren

Codebeispiel

Erstellen Sie die folgenden CSS- und HTML-Dateien.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Anleitung:

Die folgende CSS-Beschreibung des Containers erstellt 4 Zeilen x 2 Zeilenraster.

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

Nach dem Login kopieren

Das CSS für jedes Element des Rasters ist (GridItem 1~GridItem 8). Wir definieren Gitterzellen für jedes Gitter. Ändern Sie die Hintergrundfarbe für jede Zelle des Rasters.

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

Nach dem Login kopieren

Ergebnisse anzeigen

Verwenden Sie den Firefox-Browser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Effekt wird angezeigt. Erstellen Sie ein Raster mit 2 Zeilen und 4 Spalten und zeigen Sie in jeder Zelle die Zeichenfolge „Element n“ an. Zusätzlich kann für jede Zelle die Hintergrundfarbe der Zelle eingestellt werden.

Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)

Ebenso wird die gleiche Datei in Google Chrome angezeigt. Der unten gezeigte Effekt wird angezeigt.

Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)

Die Rasteranzeige kann im IE-Browser nicht abgeschlossen werden und die Anzeige ist reduziert.

Beispiel für keine Zellen in allen Gittern

Während das vorherige Beispiel den Fall vorstellt, in dem es eine Option für alle Gitter innerhalb einer Zelle gibt, funktioniert sie sogar, wenn überhaupt Projekt in allen Rastern. Unten finden Sie ein Beispiel für dünnbesetzte (diskrete) Zellen in einem Raster.

Code

Erstellen Sie die folgenden CSS- und HTML-Dateien.

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

Anweisungen:

Mit dem folgenden Code , Der äußere Rahmen des Rasters ist ein Raster mit 2 Zeilen × 4 Spalten.

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

Nach dem Login kopieren

Das CSS für den Zellenteil des Rasters lautet wie folgt. Diesmal ist es ein 2×4-8-Zellen-Gitter, aber wir haben nur 3 Zellen darin angeordnet. Rahmen Sie den Container in die zweite Spalte der ersten Zeile, die dritte Spalte der Zelle in der zweiten Zeile und den Inhalt an drei Stellen in die vierte Spalte der Zelle in der ersten Zeile ein.

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

Nach dem Login kopieren

Der HTML-Teil des Rasters. Beschreibt drei Div-Frames innerhalb eines Rasterrahmens.

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

Nach dem Login kopieren

Ergebnisse anzeigen

Wir zeigen den obigen HTML-Code im Firefox-Browser an. Der unten gezeigte Effekt wird angezeigt. Der Inhaltsrahmen wird an der durch CSS angegebenen Position platziert.

Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)

Der in Google Chrome angezeigte Effekt ist wie folgt.

Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!