CSS Grid Tutorial
Das mobile Internet stellt für die Entwickler von Websites eine große Herausforderung dar. Mobile Endgeräte wie Tablets und Smartphones haben andere Bildschirmauflösungen als Desktop-Computer und Laptops. Diese unterschiedlichen Displays und Bildschirmauflösungen müssen bei der Gestaltung einer Webseite ebenfalls berücksichtigt werden.
Responsive Web-Design sorgt dafür, dass eine Webseite auf jedem Endgerät und bei jeder Bildschirmauflösung gut aussieht und benutzbar ist. Responsive Layouts passen sich automatisch an die verfügbare Bildschirmgröße oder Fenstergröße an.
CSS Grid ist ein Raster aus fiktiven (gedachten) Linien. Es dient dazu, das Layout von Webseiten in Zeilen und Spalten (Tracks) zu gliedern. Die Grid-Zellen sind die Schnittpunkte von Zeilen und Spalten. Eine Grid-Zelle wird von vier Grid-Linien begrenzt und ist die kleinste Einheit in dem Grid-Container. Mit diesem Layoutraster lassen sich komplexe, verschachtelte Layouts effektiv gestalten.
Grundlegende Funktion von CSS Grid
CSS Grid arbeitet mit einem Eltern-Element (Grid-Container), in dem das Raster definiert wird. Danach werden mehere Kind-Elemente (Item) in dem Raster platziert. Damit der Container die Information erhält, dass mit CSS Grid gearbeitet werden soll, wird der Befehl display: grid
verwendet. Die im übergeordneten Container definierten Eigenschaften werden an alle Items vererbt. Dann werden die Zeilen und Spalten definiert.
Die Zeilen bzw. Spalten des Grid werden jeweils durch eine Liste von Werten definiert, die durch Leerzeichen getrennt sind. Die Werte geben die Höhe bzw. Breite der Tracks an. Der Abstand zwischen ihnen ist die Breite der Grid-Linien.
Die Höhe bzw. Breite (Track-Size) kann eine Länge oder ein Prozentwert sein. Ein Sonderfall ist die Einheit Fraction (fr). Mit dieser Maßeinheit kann man den Bildschirm individuell aufteilen, ähnlich wie mit Prozentwerten. Der Vorteil der relativen Einheit fr ist, dass das Raster sich automatisch an die Bildschirmgröße anpassen kann.
Für die Zeilen wird die Eigenschaft grid-template-rows
und für die Spalten die Eigenschaft grid-template-columns
verwendet. Diese Eigenschften legen das Raster an und zeichnen die gedachten Raster-Linien.
Sollen Abstände zwischen den Zeilen und Spalten des Grid erzeugt werden, so kann mit der Eigenschaft gap
des Grid-Containers eine Breite für die Grid-Linien festgelegt werden.
Für gap
können ein oder zwei Werte angegeben werden.
-
ein Wert
Der Wert definiert den Abstand zwischen den Zeilen und Spalten. -
zwei Werte
Der erste Wert definiert den vertikalen Abstand zwischen den Zeilen (row-gap). Der zweite Wert definiert den horizontalen Abstand zwischen den Spalten (column-gap).
Die Eigenschaft gap
ist die Kurzschreibweise für die Eigenschaften row-gap
und column-gap
(früher: grid-gap, grid-column-gap und grid-row-gap).
Die Abstände werden nur zwischen den Zeilen bzw. Spalten erzeugt. Die erste und letzte Grid-Linie bleibt unverändert.
Werden nun Child-Elemente in den Grid-Container eingefügt, so werden die Inhalte automatisch ins Grid-Raster eingefügt. Standardmäßig werden die Elemente im Grid-Container zeilenweise von links oben nach rechts unten ausgerichtet.
Im folgenden Beispiel wird ein CSS Grid mit drei Zeilen und vier Spalten erzeugt. Die erste Zeile hat eine Höhe von 12em, die dritte eine Höhe von 6em. Die mittlere Zeile nimmt den verbleibenden Platz ein.
Beispiel CSS/* Grid-Container definieren */
.grid-container
{
display
: grid
;
grid-template-rows
: 12em
auto
6em
;
grid-template-columns
: 1fr 1fr 1fr 1fr
;
gap
: 1.0em
;
padding
: 0
;
background
: #dbdbdb
;
}
.grid-container > div
{
font-size
: 1.25em
;
text-align
: center
;
background
: #94bbcc
;
color
: #000000
;
border
: 1px
solid
#000000
;
}
<div class=
"grid-container"
>
<div>Box 1
</div>
<div>Box 2
</div>
<div>Box 3
</div>
<div>Box 4
</div>
<div>Box 5
</div>
<div>Box 6
</div>
<div>Box 7
</div>
<div>Box 8
</div>
<div>Box 9
</div>
<div>Box 10
</div>
<div>Box 11
</div>
<div>Box 12
</div>
</div>
Dieser Hintergrund repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.
Um den Effekt besser sichtbar zu machen, hat das Ausgabe-Window eine Höhe von 40em und der Grid-Container eine Höhe von 100% des Ausgabe-Windows.
Elemente im Grid-Raster positionieren
Mit CSS Grid lassen sich Elemente auch völlig frei im Raster positionieren. Um dies zu erreichen, wird den Child-Elementen mit den CSS-Eigenschaften grid-row-start
und grid-row-end
bzw. grid-column-start
und grid-column-end
mitgeteilt, wo sie im Grid-Raster positioniert werden sollen. Für diese CSS-Eigenschaften gibt es auch die Kurzschreibweisen grid-row
und grid-column
Dabei werden Start-Linie und End-Linie des Rasters mit einem Slash / voneinander getrennt.
Beachte:Die Positionierung wird nicht über Rasterzeilen bzw. Rasterspalten vorgenommen, sondern über Grid-Linien.
Das oben dargestellte Beispiel-Layout besitzt drei Zeilen und vier Spalten. Es besitzt daher vier horizontale und fünf vertikale Grid-Linien. Wenn sich ein Element über die gesamte Breite ausdehnen soll, dann erstreckt es sich von Grid-Linie 1 (0%) bis 5 (100%).
3-Spalten-Layout mit Header und Footer
Das folgende Code-Beispiel zeigt, wie man die Elemente im Grid-Raster positionieren kann, um ein 3-Spalten-Layout mit Kopfzeile und Fußzeile zu erzeugen.
/* 3-Spalten-Layout mit CSS Grid */
.gridBox
{
display
: grid
;
grid-template-rows
: 4em
auto
2em
;
grid-template-columns
: 18%
1fr
20%
;
gap
: 0
;
padding
: 0
;
background
: transparent
;
}
.gridBox > nav
{
grid-row-start
: 1
;
grid-row-end
: 4
;
grid-column-start
: 1
;
grid-column-end
: 2
;
padding
: 0 0.75em
;
font-size
: 1.25em
;
text-align
: center
;
background
: #600d0d
;
color
: #000000
;
}
.gridBox > header
{
grid-row-start
: 1
;
grid-row-end
: 2
;
grid-column-start
: 2
;
grid-column-end
: 4
;
padding
: 0 0.75em
;
font-size
: 1.25em
;
text-align
: center
;
background
: #ffffd2
;
color
: #000000
;
}
.gridBox > main
{
grid-row-start
: 2
;
grid-row-end
: 3
;
grid-column-start
: 2
;
grid-column-end
: 3
;
padding
: 0 0.75em
;
font-size
: 1.25em
;
text-align
: center
;
background
: #94bbcc
;
color
: #000000
;
}
.gridBox > aside
{
grid-row-start
: 2
;
grid-row-end
: 3
;
grid-column-start
: 3
;
grid-column-end
: 4
;
padding
: 0 0.75em
;
font-size
: 1.25em
;
text-align
: center
;
background
: #e5f3d8
;
color
: #000000
;
}
.gridBox > footer
{
grid-row-start
: 3
;
grid-row-end
: 4
;
grid-column-start
: 2
;
grid-column-end
: 4
;
padding
: 0 0.75em
;
font-size
: 1.25em
;
text-align
: center
;
background
: #dfdfdf
;
color
: #000000
;
}
<div class=
"gridBox"
>
<header>Headline
</header>
<main>Hauptinhalt der Seite
</main>
<nav>Navigation der Seite
</nav>
<aside>Info-Box
</aside>
<footer>Fußzeile
</footer>
</div>
Dieser Hintergrund repräsentiert das Ausgabe-Display und gehört nicht zum Beispiel-Code.
Um den Effekt besser sichtbar zu machen, hat das Ausgabe-Window eine Höhe von 40em und der Grid-Container eine Höhe von 100% des Ausgabe-Windows.
Empfehlung
In diesem Beispiel wird die Breite für die Navigation und die rechte Seitenleiste (Info-Box) in Prozent angegeben. In der Praxis ist es in der Regel besser, eine relative Einheit wie em zu verwenden.
Im HTML-Quelltext des Beispiels steht der Hauptinhalt der Seite vor der Navigation. Die Info-Box und der Footer stehen am Ende. Dadurch werden die Barrierefreiheit (Englisch: Accessibility) und SEO (Suchmaschinenoptimierung) verbessert.
Grid-Linien mit Namen bezeichnen
Bei der Definition des Rasters mit den Eigenschaften grid-template-rows
und grid-template-columns
kann man den Grid-Linien Namen zuweisen. Die Linien-Namen können dann verwendet werden, um die Items (Grid-Elemente) zu positionieren.
Die zugewiesenen Namen müssen in eckige Klammern [⋯] eingeschlossen und relativ zu den Tracks (Zeilen bzw. Spalten) platziert werden.
Beispielgrid-template-rows
: [row1]
4em
[row2]
auto
[row3]
2em
[row4]
;
grid-template-columns
: [col1]
16em
[col2]
1fr
[col3]
20em
[col4]
;
Einer Grid-Linie können auch mehrere Namen zugewiesen werden. Dazu werden die Namen durch Leerzeichen getrennt in den eckigen Klammern angegeben.
Positionierung von Items mit Linien-Namen
Bei der Positionierung der Grid-Items (Child-Elemente) kann man anstelle der Nummern der Grid-Linien auch die zugewiesenen Namen der Grid-Linien angeben.
Beispiel CSS.gridBox
{
display
: grid
;
grid-template-rows
: [row1]
4em
[row2]
auto
[row3]
2em
[row4]
;
grid-template-columns
: [col1]
16em
[col2]
1fr
[col3]
20em
[col4]
;
. . .
}
.gridBox > nav
{
grid-row
: row1
/ row4
;
grid-column
: col1
/ col2
;
. . .
}
.gridBox > header
{
grid-row
: row1
/ row2
;
grid-column
: col2
/ col4
;
. . .
}
.gridBox > main
{
grid-row
: row2
/ row3
;
grid-column
: col2
/ col3
;
. . .
}
.gridBox > aside
{
grid-row
: row2
/ row3
;
grid-column
: col3
/ col4
;
. . .
}
.gridBox > footer
{
grid-row
: row3
/ row4
;
grid-column
: col2
/ col4
;
. . .
}
Grid-Bereiche mit Namen bezeichnen
Noch übersichtlicher als die Angabe von Linien-Nummern oder Linien-Namen ist die Verwendung von Grid-Bereichen.
In CSS Grid kann man mehrere Zellen des Rasters zu einer Area zusammenfassen und diesem Bereich einen Namen zuweisen. Dadurch wird die Positionierung der einzelnen Elemente im Grid intuitiver.
Die Definition der Bereiche erfolgt im Grid-Container. Dazu benutzt man die Eigenschaft grid-template-areas
und trägt die Namen der Bereiche zeilenweise in die Zellen ein.
.gridBox
{
display
: grid
;
grid-template-rows
: 4em
auto
2em
;
grid-template-columns
: 16em
1fr
20em
;
grid-template-areas
:
"nav header header"
"nav content sidebar"
"nav footer footer"
. . .
}
.gridBox > nav
{
grid-area
: nav
;
. . .
}
.gridBox > header
{
grid-area
: header
;
. . .
}
.gridBox > main
{
grid-area
: content
;
. . .
}
.gridBox > aside
{
grid-area
: sidebar
;
. . .
}
.gridBox > footer
{
grid-area
: footer
;
. . .
}