Umsetzung gängiger Layouts mit Grids
Um dieses Set von CSS-Grid-Layout-Leitfäden abzurunden, werden wir uns einige verschiedene Layouts ansehen, die einige der Techniken demonstrieren, die Sie beim Design mit Grid-Layout verwenden können. Wir schauen uns ein Beispiel mit grid-template-areas, einem flexiblen 12-Spalten-Grid-System und einer Produktliste mit Auto-Platzierung an. Wie Sie an diesem Set von Beispielen sehen, gibt es oft mehr als einen Weg, um mit CSS-Grid-Layout die gewünschten Ergebnisse zu erzielen. Wählen Sie die Methode, die Ihnen am hilfreichsten erscheint für die Probleme, die Sie lösen müssen, und die Designs, die Sie umsetzen wollen.
Ein responsives Layout mit 1 bis 3 flüssigen Spalten unter Verwendung von grid-template-areas
Viele Websites sind eine Variation dieses Layouts mit Inhalt, Seitenleisten, einem Header und einem Footer. In einem responsiven Design möchten Sie das Layout möglicherweise als eine einzelne Spalte anzeigen, eine Seitenleiste ab einem bestimmten Breakpoint hinzufügen und dann ein Drei-Spalten-Layout für breitere Bildschirme einführen.
Wir werden dieses Layout mit den benannten Template-Bereichen erstellen, die wir im Grid-Template-Areas-Leitfaden kennengelernt haben.
Das Markup ist ein Container mit Elementen für einen Header, Footer, Hauptinhalt, Navigation, Seitenleiste und einen Block für Werbung.
<div class="wrapper">
<header class="main-head">The header</header>
<nav class="main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1>Main article area</h1>
<p>
In this layout, we display the areas in source order for any screen less
that 500 pixels wide. We go to a two column layout, and then to a three
column layout by redefining the grid, and the placement of items on the
grid.
</p>
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
Da wir grid-template-areas verwenden, um das Layout zu erstellen, müssen wir die Bereiche außerhalb jeglicher Media-Queries benennen. Wir benennen Bereiche mit der Eigenschaft grid-area.
.main-head {
grid-area: header;
}
.content {
grid-area: content;
}
.main-nav {
grid-area: nav;
}
.side {
grid-area: sidebar;
}
.ad {
grid-area: ad;
}
.main-footer {
grid-area: footer;
}
Dies erstellt noch kein Layout. Vielmehr haben die Elemente nun Namen, die wir dafür verwenden können. Ohne jegliche Media-Queries richten wir nun das Layout für die mobile Breite ein. Hier behalten wir alles in der Quellreihenfolge, um jegliche Trennung zwischen Quelle und Anzeige zu vermeiden, wie im Grid-Layout und Barrierefreiheit-Leitfaden beschrieben. Wir haben keine Spalten- oder Zeilenraster explizit definiert; dieses Layout bestimmt eine einzelne Spalte und erstellt bei Bedarf Zeilen für jedes Element im impliziten Grid.
.wrapper {
display: grid;
gap: 20px;
grid-template-areas:
"header"
"nav"
"content"
"sidebar"
"ad"
"footer";
}
Mit unserem mobilen Layout können wir nun eine @media-Abfrage hinzufügen, um das Layout für größere Bildschirme anzupassen, die genügend Platz haben, um zwei Spalten anzuzeigen.
@media (min-width: 500px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"nav nav"
"sidebar content"
"ad footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
}
Sie können das Layout in den Werten von grid-template-areas erkennen. Der header erstreckt sich über zwei Spaltenraster, ebenso wie die nav. Im dritten Reihenraster platzieren wir die sidebar neben dem content. Wir platzieren den ad-Inhalt im vierten Reihenraster, damit er unter der Sidebar erscheint. Der footer ist daneben unter dem Inhalt. Wir verwenden die CSS-Flexible-Box-Layout auf der Navigation, um die Navigationselemente gleichmäßig in einer Zeile zu verteilen.
Wir können nun einen letzten Breakpoint für größere Bildschirme zum Anzeigen eines Drei-Spalten-Layouts hinzufügen.
@media (min-width: 700px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header"
"nav content sidebar"
"nav content ad"
"footer footer footer";
}
nav ul {
flex-direction: column;
}
}
Das Drei-Spalten-Layout hat zwei 1fr-Einheit-Seitenspalten und eine mittlere Spalte mit 4fr als Rastergröße. Dies bedeutet, dass der verfügbare Platz im Container in sechs Teile geteilt und in Proportion zu unseren drei Rastern zugewiesen wird — ein Teil für jede der Seitenspalten und vier Teile für die Mitte.
In diesem Layout zeigen wir die nav in der linken Spalte neben dem content. In der rechten Spalte haben wir die sidebar und darunter die Anzeigen (ad). Der footer erstreckt sich nun über den gesamten unteren Bereich des Layouts. Auch hier verwenden wir Flexbox, um die Navigation anzuzeigen, diesmal jedoch in einer Spalte statt einer Zeile.
Dieses einfache Beispiel zeigt, wie ein Grid-Layout über verschiedene Breakpoints neu angeordnet werden kann. Besonders wichtig ist dabei, dass wir den Standort des ad-Blocks je nach Bedarf in unseren unterschiedlichen Spalten-Setups ändern. Diese Methode mit benannten Bereichen kann sehr hilfreich sein, insbesondere in der Prototyping-Phase. Möglicherweise finden Sie es einfacher, Namen anstelle von Zahlen zu verwenden, wenn Sie mit der Platzierung von Elementen im Grid spielen.
Ein flexibles 12-Spalten-Layout
CSS-Frameworks und Grid-Systeme verwenden häufig 12- oder 16-Spalten flexible Grids. Wir können diese Art von System mit CSS-Grid-Layout erstellen. Als Beispiel erstellen wir ein 12-Spalten-flexibles Grid mit 12 1fr-Einheiten-Spaltenraster, von denen jede einen Startliniennamen col-start hat. Das bedeutet, dass wir zwölf Gridlinien mit dem Namen col-start haben werden.
.wrapper {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
Um zu zeigen, wie dieses Gitter funktioniert, haben wir vier Kindelemente in einem Wrapper.
<div class="wrapper">
<div class="item1">Start column line 1, span 3 column tracks.</div>
<div class="item2">
Start column line 6, span 4 column tracks. 2 row tracks.
</div>
<div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
<div class="item4">
Start at column line 3, span to the end of the grid (-1).
</div>
</div>
Wir können diese dann auf dem Grid mit den benannten Linien und auch dem span-Schlüsselwort platzieren.
.item1 {
grid-column: col-start / span 3;
}
.item2 {
grid-column: col-start 6 / span 4;
grid-row: 1 / 3;
}
.item3 {
grid-column: col-start 2 / span 2;
grid-row: 2;
}
.item4 {
grid-column: col-start 3 / -1;
grid-row: 3;
}
Wie im Leitfaden zur Verwendung benannter Grid-Linien beschrieben, verwenden wir die benannten Linien, um unsere Elemente zu platzieren. Da wir 12 Linien mit demselben Namen haben, verwenden wir den Namen und den Index der Linie. Wenn Sie es bevorzugen, können Sie den Linienindex selbst verwenden und auf benannte Linien verzichten.
Anstatt die Endliniennummer festzulegen, definieren wir, wie viele Raster dieses Element mit dem span-Schlüsselwort umfassen soll. Bei der Arbeit mit einem Mehrspalten-Layout-System kann diese Methode für diejenigen intuitiver sein, die Blöcke in Bezug auf die Anzahl der Raster, die sie überspannen, betrachten und diese dann für verschiedene Breakpoints anpassen. Um zu sehen, wie die Blöcke sich an den Rastern ausrichten, verwenden Sie den Grid-Inspector in den Entwickler-Tools Ihres Browsers; dieser zeigt wahrscheinlich klar, wie die Elemente platziert sind.
Wir müssen kein Markup hinzufügen, um eine Zeile zu erstellen. CSS-Framework-Grid-Systeme haben das oft getan, um zu verhindern, dass Elemente in die darüberliegende Zeile auftauchen, für Browser, die das CSS-Grid-Layout nicht unterstützen. Dieser Punkt ist jedoch mittlerweile hinfällig – alle modernen Browser unterstützen CSS-Grid-Layout schon lange. CSS-Grids ermöglichen es uns, Elemente in Zeilen zu platzieren, ohne dass die Gefahr besteht, dass sie in die darüberliegende Zeile geraten, wenn diese leer ist. Aufgrund dieser strengen Spalten- und Zeilenplatzierung können wir auch leicht Leerraum in unserem Layout lassen. Wir benötigen auch keine speziellen Klassen, um Elemente in das Grid einzurücken. Alles, was wir tun müssen, ist, die Start- und Endlinie für das Element anzugeben.
Erstellung eines Layouts mit dem 12-Spalten-System
Um zu sehen, wie diese Layoutmethode in der Praxis funktioniert, können wir dasselbe Layout erstellen, das wir mit grid-template-areas erstellt haben, diesmal jedoch mit dem 12-Spalten-Gittersystem. Beginnen wir mit demselben Markup wie beim Beispiel für die Grid-Template-Bereiche.
<div class="wrapper">
<header class="main-head">The header</header>
<nav class="main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="content">
<h1>Main article area</h1>
<p>
In this layout, we display the areas in source order for any screen less
that 500 pixels wide. We go to a two column layout, and then to a three
column layout by redefining the grid, and the placement of items on the
grid.
</p>
</article>
<aside class="side">Sidebar</aside>
<div class="ad">Advertising</div>
<footer class="main-footer">The footer</footer>
</div>
Wir richten unser Grid wie im obigen Beispiel für das 12-Spalten-Layout ein.
.wrapper {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
Wir werden erneut ein responsives Layout erstellen, diesmal mit benannten Linien. Jeder Breakpoint wird ein 12-Spalten-Grid verwenden. Die Anzahl der Raster, die Elemente umfassen, wird sich jedoch abhängig von der Größe des Bildschirms ändern.
Wir beginnen mobil zuerst. Für die schmalsten Bildschirme sollen die Elemente in der Quellreihenfolge bleiben und sich über das gesamte Grid erstrecken.
.wrapper > * {
grid-column: col-start / span 12;
}
Am nächsten Breakpoint wollen wir ein Zwei-Spalten-Layout. Unser Header und die Navigation erstrecken sich weiterhin über das gesamte Grid, daher müssen wir für diese keine Positionierung angeben. Die Seitenleiste beginnt an der ersten als col-start benannten Spaltenlinie und erstreckt sich über 3 Linien. Sie folgt auf die Zeilenlinie 3, da Header und Navigation in den ersten beiden Zeilenraster sind.
Das ad-Panel befindet sich unter der Seitenleiste, beginnend bei Grid-Zeilenlinie 4. Dann haben wir den Inhalt und den Footer, beginnend bei col-start 4 und sich über neun Raster erstreckend, beide bis zum Ende des Grids.
@media (min-width: 500px) {
.side {
grid-column: col-start / span 3;
grid-row: 3;
}
.ad {
grid-column: col-start / span 3;
grid-row: 4;
}
.content,
.main-footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
Schließlich definieren wir für größere Bildschirme als unser größter Breakpoint eine Drei-Spalten-Version dieses Layouts. Der Header erstreckt sich weiterhin über das gesamte Grid, aber jetzt bewegt sich die Navigation nach unten, um die erste Seitenleiste zu werden, mit dem Inhalt und dann der Seitenleiste daneben. Der Footer erstreckt sich nun ebenfalls über das gesamte Layout.
@media (min-width: 700px) {
.main-nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.side {
grid-column: col-start 11 / span 2;
grid-row: 2;
}
.ad {
grid-column: col-start 11 / span 2;
grid-row: 3;
}
.main-footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}
Überprüfen Sie erneut den Grid-Inspector in den Entwickler-Tools Ihres Browsers, um zu sehen, wie sich das Layout entwickelt hat.
Etwas zu beachten, als wir dieses Layout erstellten, ist, dass wir nicht jedes Element im Grid an jedem Breakpoint explizit positionieren mussten. Wir erbten die für frühere Breakpoints eingerichtete Platzierung – ein Vorteil der Arbeit "mobil zuerst". Wir nutzten auch die automatische Platzierung von Grids. Durch das Halten von Elementen in einer logischen Reihenfolge erledigt die automatische Platzierung einen großen Teil der Arbeit für uns bei der Platzierung von Elementen im Grid.
Eine Produktliste mit Auto-Platzierung
In diesem letzten Beispiel in diesem Leitfaden erstellen wir ein Layout, das sich vollständig auf die Auto-Platzierung verlässt.
Viele Layouts bestehen im Wesentlichen aus Sätzen von "Karten" – Produktlisten, Bildergalerien und so weiter. Ein Grid ermöglicht das Erstellen dieser Listen auf eine Weise, die responsiv ist, ohne Media-Queries hinzuzufügen. In diesem Beispiel kombinieren wir CSS-Grid- und Flexbox-Layouts, um ein einfaches Produktlistenlayout zu erstellen.
Das Markup für die Liste ist eine ungeordnete Liste von Elementen. Jedes Element enthält eine Überschrift, einen Text mit variierender Höhe und einen Call-to-Action-Link.
<ul class="listing">
<li>
<h2>Item One</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
<li>
<h2>Item Two</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
<li class="wide">
<h2>Item Three</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
<p>This one has more text than the other items.</p>
<p>Quite a lot more</p>
<p>Perhaps we could do something different with it?</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
<li>
<h2>Item Four</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
<li>
<h2>Item Five</h2>
<div class="body">
<p>The content of this listing item goes here.</p>
</div>
<div class="cta">
<a href="">Call to action!</a>
</div>
</li>
</ul>
Wir erstellen ein Grid mit einer flexiblen Anzahl flexibler Spalten. Wir möchten, dass sie mindestens 200 Pixel breit sind und jeglichen verfügbaren verbleibenden Platz gleichmäßig teilen – so erhalten wir immer Spaltenraster mit gleicher Breite. Wir erreichen dies mit der minmax()-Funktion in unserer repeat()-Notation für die Rastergröße.
.listing {
list-style: none;
margin: 2em;
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Wenn wir dieses CSS hinzufügen, werden die Elemente als Grid angeordnet. Wenn wir das Fenster verkleinern oder vergrößern, ändert sich die Anzahl der Spaltenraster – ohne Media-Queries, die Breakpoints hinzufügen, und ohne dass wir das Grid neu definieren müssen.
Wir können das Innere der Kästchen mit einem Hauch von Flexbox aufräumen. Wir setzen das Listenelement auf display: flex und die flex-direction auf column. Wir können dann einen automatischen Abstand auf der .cta verwenden, um diese Leiste nach unten an den Rand des Kastens zu schieben.
.listing li {
border: 1px solid #ffe066;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.listing .cta {
margin-block-start: auto;
border-block-start: 1px solid #ffe066;
padding: 10px;
text-align: center;
}
.listing .body {
padding: 10px;
}
Dies ist einer der Hauptgründe, Flexbox anstelle von CSS-Grid-Layout zu verwenden. Wenn Sie Inhalt in einer einzelnen Dimension ausrichten oder verteilen, ist das ein Anwendungsfall für Flexbox.
Vermeidung von Lücken mit dem dense-Schlüsselwort
Das Ganze sieht jetzt ziemlich komplett aus. Manchmal haben wir jedoch Karten, die weitaus mehr Inhalt enthalten als die anderen. Es könnte schön sein, diese über zwei Raster zu erstrecken, damit sie nicht so hoch sind. Wir fügen eine wide-Klasse zu dem größeren Element hinzu und fügen eine Regel hinzu, die ihm ein grid-column-end mit einem Wert von span 2 gibt. Wenn dieses Element angezeigt wird, wird es zwei Raster zugewiesen. Dies bedeutet, dass wir an einigen Breakpoints eine Lücke im Grid haben werden – wenn nicht genug Platz vorhanden ist, um ein Zweiraster-Element anzuordnen.
Wir können das Grid dazu bringen, diese Lücken aufzufüllen, indem wir grid-auto-flow: dense im Grid-Container verwenden. Seien Sie vorsichtig, wenn Sie dies tun, da es dazu führen kann, dass Elemente aus ihrer logischen Quellreihenfolge genommen werden. Sie sollten dies nur tun, wenn Ihre Elemente keine festgelegte Reihenfolge haben. Außerdem sollten Sie sich der Barrierefreiheits- und Neuordnungsprobleme bewusst sein, die sich daraus ergeben, dass die Tabulatorreihenfolge der Quelle und nicht Ihrer neu geordneten Anzeige folgt.
.listing {
list-style: none;
margin: 2em;
display: grid;
gap: 20px;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.listing .wide {
grid-column-end: span 2;
}
Die Verwendung der Auto-Platzierung mit einigen Regeln, die auf bestimmte Elemente angewendet werden, ist sehr nützlich und kann bei Inhalten helfen, die Sie nicht steuern können, wie CMS-Ausgaben, bei denen Sie wiederholte Elemente haben und strukturelle Pseudoklassen verwenden können, um sie zu adressieren.
Weiterführende Erkundung
CSS-Grid-Layout bietet so viele Möglichkeiten. Der beste Weg, um zu lernen, Grid-Layout zu nutzen, besteht darin, weiterhin Beispiele wie die hier behandelten zu erstellen. Wählen Sie ein Layout von einer responsiven Website, die Ihnen gefällt, und sehen Sie, ob Sie es mit Grid erstellen können. Sie können sich sogar von Zeitschriften oder anderen nicht-webbezogenen Quellen inspirieren lassen.
- CSS-Grid-Layout
- CSS Layout: Grids
- A complete guide to CSS grid auf CSS-Tricks (2023)
- Grid by example
- CSS grid website layout examples auf quackit.com