CSS/Tutorials/Grid/Grid-Items
Text-Info
- 30min
- einfach
- Grundkenntnisse in
• HTML
• CSS
Das Grid Layout unterscheidet zwischen dem Elternelement Grid-Container und den darin enthaltenen Rasterelementen (Grid-Items). Wie im letzten Beispiel schon angerissen, können die Grid Items beliebig im Raster platziert und dimensioniert werden:
Inhaltsverzeichnis
Die Rasterelemente
Unsere Webseite soll ja eben nicht aus gleichgroßen Blöcken bestehen. Deshalb sollen im nächsten Schritt individuelle Festlegungen für jedes einzelne Rasterelement getroffen werden. Die Rasterelemente können einzelne Zellen oder aber einen Rasterbereich (grid area) über mehrere Felder einnehmen.
Der folgende Abschnitt mag verwirrend erscheinen. Grund ist, dass in einer Zeile CSS zwei verschiedene Schritte durchgeführt werden:
- Linien werden als Start unserer Rasterelemente selektiert.
- Die Rasterelemente erhalten mit Berechnungen zu anderen Rasterlinien ihre Größe.
Anfangs- und Endlinien festlegen
Mit den Eigenschaften
sowie
können Sie Anfangs- und End-Rasterlinien festlegen, die damit die Größe und Position innerhalb der grid row bestimmen.
Übersichtlicher ist die Verwendung der zusammenfassenden Eigenschaften (shorthand properties) grid-column und grid-row:
Die grid-column-Eigenschaft ist die Zusammenfassung der Eigenschaften grid-column-start und grid-column-end, die durch den Slash getrennt werden.
Mögliche Angaben sind:
-
grid-column: 1 / 6;: Das Rasterelement erstreckt sich von der ersten bis zur 6. Rasterlinie. -
grid-column: 1 / -1;: Es sind auch negative Werte möglich. Das Rasterelement erstreckt sich von der ersten bis zur letzten Rasterlinie. -
grid-column: 1 / span 5;: Das Rasterelement erstreckt sich von der ersten Rasterlinie über 5 Zellen hinweg. -
grid-column: span 5;: Das Rasterelement erstreckt sich über 5 Zellen hinweg. Ein fester Anfang ist nicht vorgegeben.
body {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
header {
grid-column: 1 / 6;
grid-row: 1 / auto;
}
nav {
grid-column: 1 / span 5;
grid-row: 2;
}
Ausgangspunkt ist wieder unser 5-spaltiger Raster.
Für den header legen wir mit grid-column fest, dass er in der ersten Spalte beginnen und dann am Ende der 5. Spalte ( also an der 6. Rasterlinie) enden soll. grid-row legt fest, dass er von der ersten horizontalen Rasterlinie beginnen soll. Der Wert auto wird als span mit einem Wert von 1 berechnet, sodass das Element eine Zeile hoch ist.
Die Navigation beginnt in der ersten Spalte und erstreckt sich durch das Schlüsselwort span über 5 Spalten. Die vertikale Positionierung beginnt in der 2. Zeile und ist eine Zeile hoch. Da der Defaultwert für grid-row-end ja auto beträgt, muss er nicht mehr explizit erwähnt werden.
Die anderen vier Rasterelemente werden als schmale Spalten in der dritten Zeile dargestellt.
Verändern Sie die Werte für grid-column und grid-row und beobachten Sie die Veränderungen.
In einem weiteren Schritt werden nun für alle Kindelemente des Rasters eigene Rasterbereiche festgelegt:
body{
display: grid;
grid-template-columns: repeat(5, 1fr);
}
header {
grid-column: 1 / 5;
grid-row: 1 / 2;
}
nav {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
article {
grid-column: 2 / 4;
grid-row: 2 / 4;
}
aside {
grid-column: 5 / 6;
}
footer {
grid-column: 1 / 6;
grid-row: 4 / 5;
}
grid-area
Ein Blick in den Seiteninspektor des Firefox verrät, dass diese expliziten Festlegungen vom Browser in der zusammenfassenden Eigenschaft grid-area notiert werden. Dabei werden die Werte von grid-row-start, grid-column-start, grid-row-end und grid-column-end jeweils mit einem Slash (/) notiert:
header {
grid-area: 1 / 1 / 2 / 6;
}
/* übersichtlichere Alternative */
nav {
grid-area: 2 / 1 / auto / span 1;
}
Achtung!
negative Werte
Wenn Sie Elemente über die gesamte Breite (oder bis zum Ende) des Rasters spannen wollen, müssen Sie nicht die Anzahl der Zellen zählen, bzw. den Wert bei einer Änderung der Anzahl der Spalten ändern. Ein negativer Wert beginnt mit der Zählung von rechts, sodass das Element dann alle Spalten überspannt:
body{
display: grid;
grid-template-columns: repeat(5, 1fr);
}
header {
grid-column: 1 / -1;
grid-row: 1 / 2;
}
-1 am Beginn von rechts, also dem Ende des Rasters.Anwendungsbeispiele
body {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 150px 1fr 1fr 100px;
min-height: 100vh;
}
...
footer {
grid-column: 1 / span 3;
grid-row: 4;
}
body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente können nun innerhalb eines Rasters angeordnet werden.Mit grid-template-columns: 1fr 3fr 1fr; werden nun drei Spalten festgelegt, die den verfügbare Breite im Verhältnis der Bruchteile (hier 1 : 3 : 1) untereinander aufteilen.
Mit grid-template-rows: 150px 1fr 1fr 100px; werden nun vier Zeilen festgelegt. Während die obere und untere Zeile feste Höhen haben, teilen die beiden mittleren Zeilen den verfügbaren Raum unter sich im Verhältnis der Bruchteile fr (hier 1:1) unter sich auf.
Definitionsliste nebeneinander
Die Elemente von Definitions- oder Beschreibungslisten werden in der browsereigenen Darstellung untereinander angezeigt. Das Platzieren der Blöcke kann schwierig werden, da bei mehreren dd-Elementen ein gemeinsames Elternelement fehlt. Mit Grid Layout ist es möglich, Definitionslisten in ein kompaktes Raster zu fassen.
dl {
display: grid;
grid-template-columns: auto 1fr;
max-width: 300px;
margin: 1em;
line-height: 1.4;
}
dt {
grid-column: 1;
font-weight: bold;
}
dd {
grid-column: 2;
}
Fazit
Ich habe nun drei Jahre Erfahrung mit dem mittlerweile nicht mehr ganz neuen Grid Layout:
Der stärkste Vorteil des Grid Layout ist seine Flexibilität, mit der die Elemente im Raster verteilt werden. Bei einigen Elementen mit viel Inhalt ist es wichtig und richtig, sie über mehrere Zellen erstrecken zu lassen.
Generell sollte man aber (fast) alles den Browser machen lassen. Genau wie eine pixelgenaue Positionierung wenig sinnvoll ist, so wenig nützen zu viele Angaben zur genauen Position für alle Rasterlemente. Im nächsten Kapitel erfahren Sie, wie Sie die Raster (bzw. die Anzahl der Felder pro Reihe) ohne media queries responsiv gestalten können.
--Matthias Scharwies (Diskussion) 06:33, 14. Mär. 2020 (CET)
Fünf Dinge fallen auf:
grid-template-columns: repeat(5, 1fr);festgelegt wurden, werden die Zeilen auch ohne Festlegung automatisch gebildet.grid-template-columnsund beobachten Sie, was passiert.