Bei Layouts denken wir oft an Designs auf Seitenebene. Kleinere Komponenten auf der Seite können jedoch eigene eigenständige Layouts haben.
Idealerweise werden diese Layouts auf Komponentenebene automatisch angepasst, unabhängig von ihrer Position auf der Seite. Es kann Situationen geben, in denen Sie nicht wissen, ob eine Komponente in der Spalte mit dem Hauptinhalt, in der Seitenleiste oder in beiden platziert wird. Wenn Sie nicht wissen, wo eine Komponente landet, müssen Sie dafür sorgen, dass sie sich selbst an ihren Container anpassen kann.
GRid
Das CSS-Raster eignet sich nicht nur für Layouts auf Seitenebene. Sie funktioniert auch gut für die darin enthaltenen Komponenten.
In diesem Beispiel erzeugen die Pseudoelemente ::before
und ::after
dekorative Linien auf beiden Seiten einer Überschrift. Die Überschrift selbst ist ein Rastercontainer. Die einzelnen Elemente sind so angeordnet, dass die Linien immer den verfügbaren Platz ausfüllen.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
![Entwicklertools in Firefox mit einem Raster-Overlay](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-41cc2b52eb644.png?authuser=6&hl=de)
![Entwicklertools in Chrome mit einem Raster-Overlay](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-295e54e7843c5.png?authuser=6&hl=de)
Informationen zum Prüfen von Rasterlayouts in den Chrome-Entwicklertools
Flexbox
Wie der Name schon sagt, können Sie mit Flexbox Ihre Komponenten flexibel gestalten. Sie können festlegen, welche Elemente in Ihrer Komponente eine Mindest- oder Maximalgröße haben sollen, und die anderen Elemente entsprechend anpassen lassen.
In diesem Beispiel nimmt das Bild ein Viertel des verfügbaren Platzes und der Text die anderen drei Viertel ein. Aber das Bild wird nie größer als 200 Pixel.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
![Entwicklertools in Firefox mit einem Flexbox-Overlay](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-firefox-4f0d749fd4328.png?authuser=6&hl=de)
![Entwicklertools in Chrome mit einem Flexbox-Overlay](https://web.dev/static/learn/design/micro-layouts/image/developer-tools-chrome-s-49b481f837205.png?authuser=6&hl=de)
Flexbox-Layouts in den Chrome-Entwicklertools prüfen
Containerabfragen
Mit der Flexbox können Sie aus den Inhalten heraus ein Design entwickeln. Sie können die Parameter Ihrer Elemente angeben (wie schmal und breit sie werden sollen) und dem Browser die endgültige Implementierung überlassen.
Die Komponente selbst hat jedoch kein Bewusstsein für ihren Kontext. Er weiß nicht, ob er im Hauptinhalt oder in einer Seitenleiste verwendet wird. Dadurch können Komponentenlayouts schwieriger sein als Seitenlayouts. Um kontextbezogene Stile anwenden zu können, müssen Ihre Komponenten mehr wissen als die Größe des Darstellungsbereichs, in dem sie sich befinden.
Bei Seitenlayouts wissen Sie die Breite des Containers, da der Container der Darstellungsbereich des Browsers ist. Medienabfragen geben die Abmessungen des Containers auf Seitenebene an.
Mit Containerabfragen können Sie Berichte zu den Dimensionen eines Containers erstellen.
Legen Sie zuerst fest, welche Elemente als Container dienen.
main,
aside {
container-type: inline-size;
}
Das bedeutet, dass Sie die Inline-Dimension abfragen möchten. Bei englischsprachigen Dokumenten ist das die horizontale Achse. Sie werden Stile basierend auf der Breite des Containers ändern.
Wenn sich eine Komponente in einem dieser Container befindet, können Sie Stile ähnlich wie Medienabfragen anwenden.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Wenn sich ein Medienobjekt in einem Container befindet, der schmaler als 25em
ist, werden die Flexbox-Stile nicht angewendet. Bild und Text sind vertikal angeordnet.
Wenn das enthaltende Element jedoch breiter als 25em
ist, werden Bild und Text nebeneinander angezeigt.
Mit Containerabfragen können Sie Komponenten unabhängig voneinander gestalten. Sie können Regeln schreiben, die auf der Breite des enthaltenen Elements basieren. Die Breite des Darstellungsbereichs spielt keine Rolle mehr.
Abfragen kombinieren
Sie können Medienabfragen für das Seitenlayout und Containerabfragen für die Komponenten auf der Seite verwenden.
Hier besteht die Gesamtstruktur der Seite aus einem main
-Element und einem aside
-Element.
In beiden Elementen befinden sich Medienobjekte.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Bei einer Medienabfrage wird ein Rasterlayout auf die Elemente main
und aside
angewendet, wenn der Darstellungsbereich breiter als 45em
ist.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
Die Containerabfrageregel für die Medienobjekte bleibt gleich: Wenden Sie nur ein horizontales Flexbox-Layout an, wenn das enthaltende Element breiter als 25em
ist.
Containerabfragen sind für Mikrolayouts bahnbrechend. Ihre Komponenten können unabhängig vom Darstellungsbereich des Browsers unabhängig sein.
Wissen testen
Testen Sie Ihr Wissen über Mikro-Layouts.
Raster und Flexbox sind beide nützlich für Mikrolayouts?
Sie haben bereits etwas über Makro-Layouts auf Seitenebene gelernt. Jetzt kennen Sie Mikro-Layouts auf Komponentenebene.
Als Nächstes sehen Sie sich die Bausteine Ihrer Inhalte genauer an und lernen, wie Sie Ihre Bilder responsiv machen. Zuerst erfahren Sie mehr über responsive Typografie.