Makro-Layouts

Makro-Layouts beschreiben die größere, seitenweite Struktur Ihrer Benutzeroberfläche.

Ein Wireframe eines zweispaltigen Layouts neben dem Layout einer Spalte für eine schmale Ansicht.

Bevor Sie ein Layout anwenden, sollten Sie dafür sorgen, dass der Ablauf Ihrer Inhalte sinnvoll ist. Auf kleineren Bildschirmen wird diese Standardanordnung in einer Spalte verwendet.

<body>
  <header>…</header>
  <main>
    <article>…</article>
    <aside>…</aside>
  </main>
  <footer>…</footer>
</body>

Wenn Sie diese einzelnen Komponenten auf Seitenebene anordnen, Sie entwerfen ein Makrolayout: eine ganzheitliche Ansicht Ihrer Seite. Mithilfe von Medienabfragen können Sie Regeln in CSS angeben, die beschreiben, wie sich diese Ansicht an verschiedene Bildschirmgrößen anpassen soll.

Raster

CSS-Raster ist ein hervorragendes Tool, um ein Layout auf Ihre Seite anzuwenden. Angenommen, im Beispiel oben soll ein zweispaltiges Layout verwendet werden, sobald die Bildschirmbreite ausreicht. Um dieses zweispaltige Layout anzuwenden, sobald der Browser breit genug ist, Verwenden Sie eine Medienabfrage, um die Rasterstile oberhalb eines angegebenen Haltepunkts zu definieren.

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Flexbox

Für dieses 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 angibt, wie viel Speicherplatz sie einnehmen sollte. Im Rasterbeispiel werden dieselben Informationen in einer Regel für das enthaltende Element gekapselt.

Benötigen Sie eine Medienabfrage?

Es ist nicht immer erforderlich, eine Medienabfrage zu verwenden. Medienabfragen funktionieren gut, wenn Sie Änderungen auf einige Elemente Wenn das Layout jedoch häufig aktualisiert werden muss, könnten Ihre Medienabfragen mit vielen Haltepunkten aus dem Ruder geraten.

Angenommen, Sie haben eine Seite mit vielen Kartenkomponenten. Die Karten sind nie breiter als 15em und Sie sollten so viele Karten wie möglich auf einer Zeile platzieren. Sie könnten Medienabfragen mit den Haltepunkten 30em, 45em, 60em, aber das ist mühsam und schwer zu verwalten.

Stattdessen können Sie Regeln anwenden, damit die Karten automatisch den richtigen Platz einnehmen.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  grid-gap: 1em;
}

Ein ähnliches Layout können Sie mit der Flexbox erzielen. Wenn in diesem Fall nicht genügend Karten vorhanden sind, um die letzte Zeile zu füllen, werden die verbleibenden Karten so gedehnt, dass sie den verfügbaren Platz ausfüllen, anstatt sich in Spalten auszurichten. 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 einiger intelligenter Regeln in Flexbox oder Raster können Sie dynamische Makrolayouts mit minimalem CSS-Code und ohne Medienabfragen entwerfen. Das bedeutet weniger Arbeit für Sie, da die Berechnungen stattdessen vom Browser ausgeführt werden. Beispiele für moderne CSS-Layouts, die ohne Media-Abfragen flüssig sind, finden Sie unter 1linelayouts.com.

Wissen testen

Testen Sie Ihr Wissen über Makro-Layouts.

Welcher Satz beschreibt Makrolayouts am besten?

Layouts, die andere Layouts enthalten
Versuch es noch einmal. Die meisten Layouts enthalten andere Layouts.
Wenn in einem Design Flexbox oder Grid verwendet wird.
Versuch es noch einmal. Weder Flexbox noch Grid haben etwas Spezielles für Makrolayouts.
Layouts auf niedriger Ebene, die nur einen kleinen Teil des Bildschirms abdecken.
Versuch es noch einmal.
High-Level-Layouts, die einen großen Teil des Bildschirms einnehmen.
🎉 Makro-Layouts sind grundlegende Layouts für eine Seite, die einen großen visuellen Bereich umfassen und oft mit Medienabfragen der Seitengröße angepasst werden.

Werden in Makro-Layouts immer Medienabfragen verwendet, um sie an verschiedene Bildschirmgrößen anzupassen?

Richtig
Versuch es noch einmal. Ein Makrolayout wird nicht durch die Verwendung von Medienabfragen definiert.
Falsch
🎉 Makro-Layouts können sich ohne Medienabfrage unter anderem an Inhalte anpassen und den verfügbaren Platz ausfüllen.

Sie haben jetzt einige Ideen für Makro-Layouts auf Seitenebene. auf die Komponenten auf der Seite. Hier kommen Mikro-Layouts ins Spiel.