CSS/Tutorials/Grid/Grid-Container
Text-Info
- 15min
- einfach
- Grundkenntnisse in
• HTML
• CSS
In diesem Kapitel lernen Sie, wie Sie Schritt für Schritt mehrspaltige Layouts mit dem neuen Grid Layout gestalten können. Hier ist es möglich, die Elemente beliebig zweidimensional anzuordnen.
Dabei entwickeln wir ein responsives Layout, das sich individuell an jeden Viewport anpassen kann. Die wenigen Browser, die Grid Layout nicht unterstützen, ordnen die Elemente der Webseite untereinander an. Alternativ können Sie die Festlegungen für das Grid Layout innerhalb einer @supports -Regel definieren und ein herkömmliches Design als Fallback anbieten.
Inhaltsverzeichnis
Ein Raster
Als Grundlage verwenden wir unsere Webseite aus dem HTML-Tutorial.
display: grid
Die Grid-Container werden durch display: grid bzw. inline-grid definiert und können eine Breite, bzw. Mindest- oder Maximalbreite haben.
body {
display: grid;
max-width: 99em;
}
In der Spezifikation gab es noch den Wert subgrid, um verschachtelte Raster zu ermöglichen. Im CSS Grid Layout Module Level 2 ist subgrid ein Wert für grid-template-columns und grid-template-rows, um auch andere als direkte Kindelemente des Grid-Containers in ein Gestaltungsraster zu integrieren.
Erzeugen von Spalten und Zeilen
Das oben erzeugte Raster hätte nur eine Spalte mit untereinanderliegenden Zellen. Damit diese nebeneinander positioniert werden, erzeugen wir nun Spalten.
Einer der faszinierendsten Aspekte ist die Erzeugung der Rasterstruktur. Hier können Sie bereits im Grid Container, also dem Elternelement, die Größe und Position der einzelnen Rasterelemente (Grid Items) festlegen. Dabei können Sie Anzahl und Größe der Spalten und Reihen explizit angeben oder dies den auto-placement-Algorithmus implizit erledigen lassen.
explizite Erzeugung
Mit grid-template-columns können Sie Anzahl und Breite der Spalten,
mit grid-template-rows Anzahl und Höhe der Zeilen explizit festlegen.
body {
display: grid;
grid-template-columns: auto auto auto;
}
Anonyme Rasterelemente
In ein HTML-Dokument eingefügter Text bildet einen Textknoten, der aber mangels CSS-Selektor nicht formatiert werden kann. Im Grid Layout wird er als anonymes Rasterelement trotzdem in das Gestaltungsraster eingepasst.
<header>
...
</header>
<nav>
...
</nav>
Klartext, der ein anonymes Rasterelement bildet.
<aside id="news">
...
</aside>
<article>
...
</article>
Mehr über den auto-placement-Algorithmus finden Sie im Kapitel responsive Raster ohne Media Queries.
implizite Erzeugung
Wie im oberen Beispiel zu sehen ist, müssen Sie nicht alle Spalten und Zeilen von vornherein definieren. Es gibt zwei Situationen, in denen Spalten oder Zeilen automatisch erzeugt werden:
- Wenn Sie Grid Items explizit außerhalb der definierten Spalten und Zeilen platzieren, wird das Grid automatisch um so viele Spalten und Zeilen erweitert, dass das Item platziert werden kann. Das heißt: Definieren Sie 3 Spalten mit
grid-template-columns, und platzieren dann ein Item beigrid-start: 10/span 3;, benötigt das Grid 12 Spalten und bekommt deshalb 9 Spalten hinzu. - Wenn Sie ein Grid mit – beispielsweise – 3 Spalten und 4 Zeilen definieren, dann aber so viele Grid-Items haben, dass diese 12 Zellen nicht reichen, wird das Grid automatisch erweitert. Ob in diesem Fall Spalten oder Zeilen hinzugefügt werden, richtet sich nach der Eigenschaft
grid-auto-flow, deren Standardwertrowist und auf die wir im Artikel über responsive Raster näher eingehen.
Die Breite bzw. Höhe von implizit erzeugten Spalten und Zeilen ergibt sich aus dem Wert der Eigenschaften grid-auto-columns und grid-auto-rows. Fehlen diese Eigenschaften, wird auto verwendet.
body {
display: grid;
grid-template-columns: auto auto auto;
}
body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente können nun innerhalb eines Rasters angeordnet werden.
Mit grid-template-columns: auto auto auto; werden drei Spalten festgelegt, deren Breite und Höhe sich an den Inhalt anpassen und die über den verfügbaren Platz verteilt werden.
grid-template-rows 3 Zeilen definiert, dann endet ein mit grid-row-end:-1 definiertes Grid-Item nach der dritten Grid-Zeile, ganz gleich, ob danach noch automatisch erzeugte Zeilen folgen.neue Wege bei Längenangaben
Viele Tutorials über Grid Layout verwenden für die Spaltenbreiten Längenangaben in festen Pixelwerten. Dies ist möglich; verhindert aber einen entscheidenen Vorteil des Grid Layout Moduls: anstelle des Entwicklers legt der Browser des Benutzers die Maße anhand des verfügbaren Platzes fest.
Anstelle des Werts auto, der dem Inhalt den minimal benötigten Platz zuweist, können Sie auch eigene Zuweisungen in Form von Längenangaben oder Bruchteilen angeben. Schon bei Flexbox konnte man auf die Berechnung von Prozent-Werten verzichten und der flex-Eigenschaft eine Zahl als Anteil an der verfügbaren Breite zuordnen, aus deren Gesamtwerten dann die verfügbare Breite vom Browser berechnet wurde. Im Grid Layout gibt es hierfür die neue Einheit fr (fraction: engl. für Bruchteil).
Ändern Sie im obigen Beispiel die Werte für die Spalten auf:
grid-template-columns: 1fr 1fr 1fr ;
repeat() - kürzer und übersichtlicher
Das „CSS-Framework“ Bootstrap besteht aus einem Raster mit 12 Spalten. Hier könnte man mit der repeat()-Funktion auf eine Angabe der Einzelwerte verzichten:
grid-template-columns: repeat(12, 1fr);
Wie Sie z.B. im Beispiel im nächsten Kapitel (s fixer Footer) sehen können, ist es einfacher, den Spalten unterschiedliche Breiten zu geben, und so das Raster einfacher und übersichtlicher zu halten.
Mut zur Lücke - gap
Das Grid-Layout platziert die Grid-Streifen normalerweise direkt nebeneinander. Die frühere Methode, für Abstand zu sorgen, bestand aus dem Setzen von margin-Angaben, was aber zu störenden Rändern am Rand des Grids führen kann.
Die Eigenschaften column-gap und row-gap ermöglichen das Setzen von Spalten- und Zeilenabständen direkt im Grid. Sie können eine Längen- oder Prozentangabe verwenden, oder mit calc() berechnen. Um Spalten- und Zeilenabstand gleichzeitig zu setzen, gibt es die Shorthand-Eigenschaft gap. Ein Beispiel finden Sie im folgenden Abschnitt.
In älteren Dokumentationen finden Sie für diese Eigenschaften möglicherweise noch die Bezeichnungen grid-gap, grid-column-gap und grid-row-gap. Diese gelten heute als Aliasnamen.
Grundraster mit unterschiedlich breiten Spalten
#container {
display: grid;
grid-template-columns: repeat(2, 3em 1fr) 10em;
grid-auto-rows: 5em;
box-sizing: border-box;
width: 100%;
background-color: #866a00 ;
gap: 0.3em;
padding: 0.3em;
}
#container > div {
background-color: #dfac20;
padding: 5px;
}
Im Raster werden mit grid-template-columns Spalten erzeugt. Dafür wird zum einen die repeat()-Funktion verwendet, um zweimal je eine 3em und eine flexible Spalte (mit 1fr) zu erzeugen. Hinter diesen vier Spalten folgt noch eine einzelne Spalte mit 10em Breite. Die einzelnen Breitenangaben werden mit Leerzeichen voneinander getrennt.
Eine konkrete Zeilendefinition ist nicht vorhanden, dadurch werden Zeilen nach Bedarf erstellt. Ihre Höhe wird mit der grid-auto-rows-Eigenschaft auf 5em festgelegt.
Darüber hinaus wurde mit der Eigenschaft gap ein Spalten- und Zeilenabstand von 0.3em zwischen den Grid-Items festgelegt. Dieser Abstand wird ergänzt durch ein gleich großes Padding des Grid-Containers. Der Effekt ist, dass die etwas dunklere Hintergrundfarbe des Containers zwischen den Grid-Items und um die Items herum sichtbar ist, was zu einem Gittermuster mit einer Balkenbreite von 0.3em führt.
Fazit
Für CSS ungewöhnlich können Sie im Grid Layout anders als beim Positionieren mit float und clear oder selbst mit Flexbox nur durch CSS-Festlegungen des Elternelements eine Webseite gestalten. Natürlich ist es aber auch möglich, die Kindelemente im Raster, die Grid-Items, zu formatieren, wie Sie im nächsten Kapitel sehen werden.
- Verwenden Sie, wie in diesem Kapitel, die relativen Maße em und vh, sowie den Bruch-/Anteil fr. So wird die Rechnerei, wie viel Platz denn nun verfügbar ist, dem Browser überlassen.
- Verzichten Sie auf feste Pixelwerte. Auch wenn viele Tutorials diese verwenden, ist dies in der Praxis nicht zu empfehlen, da so die Vorteile der flexiblen Positionierung und Ausrichtung nicht vollständig zur Wirkung kommen.
bodywird durch display: grid zu einem Grid Container. Die direkten Kindelemente werden nun innerhalb eines Rasters angeordnet.Mit
grid-template-columns: auto auto auto;werden drei Spalten festgelegt, deren Breite und Höhe sich an den Inhalt anpassen und die über den verfügbaren Platz verteilt werden.Die sechs Kindelemente nehmen zwei Zeilen oder Reihen ein.
Es gibt im Beispiel keine explizite Festlegung von Zeilen, diese werden implizit erzeugt.