Makro-Layouts beschreiben die größere, seitenübergreifende Organisation Ihrer Benutzeroberfläche.
Bevor Sie ein Layout anwenden, sollten Sie sicherstellen, dass der Fluss Ihrer Inhalte Diese einspaltige Standardsortierung ist die gleiche wie bei kleineren Bildschirmen.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
Wenn Sie diese einzelnen Komponenten auf Seitenebene anordnen, erstellen Sie ein Makro-Layout: eine übergeordnete Ansicht Ihrer Seite. Mithilfe von Medienabfragen können Sie in CSS Regeln bereitstellen, die beschreiben, wie diese Ansicht an verschiedene Bildschirmgrößen angepasst werden soll.
Raster
Das CSS-Raster ist ein hervorragendes Tool zum Anwenden eines Layouts auf Ihre Seite. Angenommen, Sie möchten im obigen Beispiel ein zweispaltiges Layout, sobald genügend Bildschirmbreite verfügbar ist. Um dieses zweispaltige Layout anzuwenden, sobald der Browser breit genug ist, definieren Sie die Rasterstile über einem angegebenen Haltepunkt mit einer Medienabfrage.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
Für dieses spezielle Layout können Sie auch Flexbox verwenden. Die Stile würden wie folgt aussehen:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
Die Flexbox-Version erfordert jedoch mehr CSS. Für jede Spalte gibt es eine eigene Regel, die festlegt, wie viel Platz sie jeweils einnehmen soll. Im Rasterbeispiel werden dieselben Informationen in einer Regel für das enthaltende Element gekapselt.
Benötigen Sie eine Medienabfrage?
Möglicherweise müssen Sie nicht immer eine Medienabfrage verwenden. Medienabfragen funktionieren gut, wenn Sie Änderungen auf einige Elemente anwenden. Wenn das Layout jedoch häufig aktualisiert werden muss, können Ihre Medienabfragen mit vielen Haltepunkten aus dem Ruder geraten.
Angenommen, Sie haben eine Seite voller Kartenkomponenten.
Die Karten sind nie breiter als 15em
und Sie möchten so viele Karten auf eine Zeile setzen, wie passen.
Sie könnten Medienabfragen mit den Haltepunkten 30em
, 45em
, 60em
usw. schreiben, aber das ist mühsam und schwierig zu verwalten.
Stattdessen können Sie Regeln anwenden, sodass die Karten selbst automatisch die richtige Menge an Speicherplatz einnehmen.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
Ein ähnliches Layout können Sie mit Flexbox erreichen. Wenn in diesem Fall nicht genügend Karten vorhanden sind, um die letzte Zeile zu füllen, werden die verbleibenden Karten so gestreckt, dass sie den verfügbaren Platz ausfüllen und nicht in Spalten angeordnet sind. Wenn Sie Zeilen und Spalten ausrichten möchten, verwenden Sie das Raster.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
Durch die Anwendung intelligenter Regeln in der Flexbox oder im Raster können Sie dynamische Makro-Layouts mit minimalem CSS-Code und ohne Medienabfragen entwerfen. Das ist weniger Arbeit für Sie – Sie überlassen die Berechnungen stattdessen dem Browser. Beispiele für moderne CSS-Layouts, die flexibel ohne Medienabfragen verwendet werden können, finden Sie unter 1linelayouts.com.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Makro-Layouts.
Welcher Satz beschreibt am besten Makro-Layouts?
Bei Makro-Layouts werden immer Medienabfragen verwendet, um sich an verschiedene Bildschirmgrößen anzupassen.
Nachdem Sie nun einige Ideen für Makro-Layouts auf Seitenebene haben, sollten Sie sich auf die Komponenten auf der Seite konzentrieren. Das ist der Bereich der Mikrolayouts.