Was ist Gitter?
Ein Raster ist eine überlappende Menge horizontaler und vertikaler Linien - eine Menge definiert Spalten und die andere definiert Zeilen. Elemente können nach Zeilen und Spalten im Raster platziert werden.
Browser-Unterstützung
Die Browserunterstützung erreicht 2020 94%
Gitterbehälter
Wir erstellen einen Rastercontainer, indem wir display: grid oder display: inline-grid für das Element deklarieren . Sobald wir dies tun, werden alle direkten untergeordneten Elemente dieses Elements zu Rasterelementen .
<body>
<div class="row">
<div class="row__item header">
<h1>Header</h1>
</div>
<div class="row__item nav">
<h1>Navbar</h1>
</div>
<div class="row__item article">
<h1>Article</h1>
</div>
<div class="row__item ads">
<h1>Ads</h1>
</div>
</div>
</body>.row {
display: grid;
margin: auto;
grid-template-rows: 60px 1fr ;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px;
height: 1000px;
justify-items: center;
justify-content: space-between;
grid-template-areas:
"header header header"
"nav article ads";
}grid-template-rows ist eine CSS-Eigenschaft, die die Zeilennamen und den Größenpfad der Rasterzeilenfunktion definiert.
Die CSS-Eigenschaft
grid-rowbestimmt, von welcher Linie im Rasterlayout das Element ausgeht, wie viele Zeilen das Element belegt oder auf welcher Linie das Element im Rasterlayout endet. Dies ist eine Abkürzungseigenschaft für die Eigenschaften Gitterreihenstart und Gitterreihenende .
Die CSS-Eigenschaft
grid-gapist eine Abkürzungseigenschaft für grid-row-gapund grid-column-gapdefiniert die Rinnen zwischen den Zeilen und Spalten des Rasters.
Die Eigenschaft
grid-template-areasdefiniert die Rastervorlage unter Bezugnahme auf Bereichsnamen, die mithilfe der Rasterbereichseigenschaft festgelegt werden .
Durch Wiederholen eines Bereichsnamens wird der Inhalt über diese Zellen verteilt. Ein Punkt bedeutet eine leere Zelle. Die Syntax selbst bietet eine Visualisierung der Gitterstruktur.
Mit der Eigenschaft können
grid-areawir jedem dieser Bereiche einen eigenen Namen zuweisen. Das Benennen von Bereichen erstellt noch kein Layout. Wir haben jedoch jetzt benannte Bereiche, die wir darin verwenden können.
.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}Erstellen Sie eine Site-Vorlage mit CSS Grid:
Vorlage ändern
Sie können die Vorlage einfach ändern, indem Sie die Rasterbereiche in neu zuweisen
grid-template-areas.
Wenn wir also dazu wechseln:
grid-template-areas:
"nav header header"
"nav article ads";
}
Als Ergebnis erhalten wir die folgende Vorlage:
Raster mit Medienabfragen
Eine der Stärken von Gittern besteht darin, dass Sie in Sekundenschnelle eine völlig andere Vorlage erstellen können.
Dies macht CSS Grid ideal für Medienabfragen. Wir können die Werte in ASCII-Grafiken einfach neu zuweisen und das Ergebnis in die endgültige Medienabfrage einschließen.
@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}
Als Ergebnis erhalten wir:
Daher geht es darum, die Werte in der Eigenschaft neu zuzuweisen
grid-template-areas.
Fazit
In diesem Artikel haben wir nur die Spitze des CSS Grid Layout-Eisbergs behandelt. Manchmal ist es schwer zu glauben, was CSS Grid kann. Dies ist eine Unterbrechung aller Muster. Und ich liebe es.
Ich rate Ihnen, diese Spezifikation zu beachten und einen Teil Ihrer Zeit damit zu verbringen, sie zu studieren. Glauben Sie mir, in Zukunft wird dies definitiv nützlich sein und es spielt keine Rolle, ob Sie in React, Angular, Vue schreiben (fügen Sie Ihre eigenen ein). Gitter sind schon lange hier.