Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)
Detaillierte Erläuterung der Verwendung des CSS-Rasterlayouts (Grid)
- 不言Original
- 2018-11-14 15:10:524516Durchsuche
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行高);
} oder
.(class名){
display: grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}Es gibt auch eine Möglichkeit, ein Intranet-Grid einzurichten.
#(id名){
display: inline-grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}oder
.(class名){
display: inline-grid;
grid-template-columns: (第一列宽度) (第二列宽度) ...... (第n列宽度);
grid-template-rows: (第一行高) (第二行高) ...... (第n行高);
}Rasterrahmen (Projektrahmen)
Geben Sie das folgende CSS für das Element an, das zum Rasterrahmen wird.
#(id名){
grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;
grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
}oder
.(class名){
grid-column: （列方向的网格的开始位置）/（列方向的网格的结束位置）;
grid-row: （行方向的网格的开始位置）/（行方向的网格的结束位置);
} oder
#(id名){
grid-column-start: (列方向的网格的开始位置);
grid-column-end: (列方向的网格的结束位置);
grid-row-start: (行方向的网格的开始位置);
grid-row-end: (行方向的网格的结束位置);
}oder
.(class名){
grid-column-start: (列方向的网格的开始位置);
grid-column-end: (列方向的网格的结束位置);
grid-row-start: (行方向的网格的开始位置);
grid-row-end: (行方向的网格的结束位置);
}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;
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;
}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>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;
}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;
}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.
Ebenso wird die gleiche Datei in Google Chrome angezeigt. Der unten gezeigte Effekt wird angezeigt.
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;
}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>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;
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;
}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>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.
Der in Google Chrome angezeigte Effekt ist wie folgt.
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!