Heim >tägliche Programmierung >CSS-Kenntnisse >Was ist das CSS-Grid-Gitterlayout?
Was ist das CSS-Grid-Gitterlayout?
- 藏色散人Original
- 2018-11-12 17:31:136608Durchsuche
Dieser Artikel führt Sie hauptsächlich in die Grundkenntnisse des CSS-Rasterlayouts ein, also des Rasterlayouts.
Empfohlene Referenzstudie: „CSS-Tutorial“
Für Frontend-Anfänger ist das Konzept des CSS Grid Layout möglicherweise etwas ungewohnt. Tatsächlich ist es sehr leicht zu verstehen. Wir alle wissen, dass CSS zum Layouten von Webseitenstilen verwendet wird. Normalerweise müssen wir Hack-Implementierungsprobleme wie Webseitenkompatibilität, Box-Floating und Positionierung berücksichtigen speziell zur Lösung dieses Problems erstellt.
Einfach ausgedrückt ist CSS Grid Layout ein zweidimensionales gitterbasiertes Layoutsystem, das sowohl Spalten als auch Zeilen verarbeiten kann. Das Ziel besteht darin, die Art und Weise zu ändern Wir kommunizieren mit Benutzern basierend auf dem Grid-Design.
Im Folgenden stellen wir Ihnen das Grid-Rasterlayout anhand eines einfachen Rasterlayout-Beispiels vor:
Ein einfaches Codebeispiel für das Grid-Layout lautet wie folgt :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid网格布局示例</title>
</head>
<style>
.wrapper {
display: grid;
grid-template-rows: 100px 100px 100px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 4;
}
.item1{
background: #333333;
}
</style>
<body>
<div class="wrapper">
<div class="item1" style=" background: #745A74;">大导航</div>
<div class="item2" style="background: #CCCC66">2</div>
<div class="item3" style="background: #FFCFCF">3</div>
<div class="item4" style="background: aquamarine">4</div>
<div class="item5" style="background: chartreuse">5</div>
<div class="item6" style="background: darkorange">6</div>
</div>
</body>
</html>Der Effekt ist wie folgt:
Im obigen Code setzen wir das display:grid-Attribut auf den angegebenen Container, um anzuzeigen, dass wir dies tun werden Beginnen Sie mit der Verwendung des Rasterlayouts, dh definieren Sie die Elemente. Erstellen Sie einen Rastercontainer, legen Sie die Größe der Spalten (grid-template-columns) und Zeilen (grid-template-rows) fest und fügen Sie dann die untergeordneten Elemente rasterweise in den Container ein -Spalte und Rasterzeile.
Wichtige Attributeinführung:
grid-template-rows Das Attribut definiert die Rasterlinien basierend auf den Abmessungen der Rasterzeilen Der Name und die Größe der Rasterspur.
grid-template-columns Das Attribut basiert auf den Abmessungen der Rasterspalten und definiert den Namen der Rasterlinien und die Größe der Rasterspuren.
Grid-column-start Die Eigenschaft gibt die Startposition des Rasterelements in der Rasterspalte an, indem eine Zeile, ein Bereich oder automatisch hinzugefügt wird. Diese Startposition definiert die Blockanfangskante des Rasterbereichs. Die Eigenschaft
Grid-column-end gibt das Ende des Rasterelements in der Rasterspalte an, indem eine beitragende Linie, ein Bereich oder „Keine“ (automatisch) platziert wird Rasterposition und legt damit die Endkante des Blocks für seinen Rasterbereich fest.
Dieser Artikel ist eine Einführung in die einfachen Grundkenntnisse des CSS-Rasterlayouts. Ich hoffe, dass er für Freunde in Not hilfreich ist.
Das obige ist der detaillierte Inhalt vonWas ist das CSS-Grid-Gitterlayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!