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. Diese einspaltige Standardsortierung entspricht den kleineren Bildschirmen.

<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 in CSS Regeln bereitstellen, die beschreiben, wie diese Ansicht an verschiedene Bildschirmgrößen angepasst werden soll.

Raster

Das CSS-Raster ist ein hervorragendes Tool, um ein Layout auf Ihre Seite anzuwenden. 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, Verwenden Sie eine Medienabfrage, um die Rasterstile über einem bestimmten Haltepunkt zu definieren.

@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 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?

Sie müssen nicht immer eine Medienabfrage 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 voller Kartenkomponenten. Die Karten sind nie breiter als 15em und Sie möchten so viele Karten in eine Zeile einfügen, wie passen. 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 nicht genügend Karten für die letzte Zeile vorhanden sind, werden die übrigen Karten so gedehnt, dass der verfügbare Platz ausgefüllt wird und sie nicht in Spalten angeordnet sind. Wenn Sie Zeilen und Spalten ausrichten möchten, verwenden Sie ein 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 ist weniger Arbeit für Sie – Sie lassen stattdessen den Browser die Berechnungen durchführen. Beispiele für moderne CSS-Layouts, die flexibel gestaltet sind, ohne dass Medienabfragen erforderlich sind, finden Sie unter 1linelayouts.com.

Wissen testen

Testen Sie Ihr Wissen über Makro-Layouts.

Welcher Satz beschreibt Makro-Layouts am besten?

Layouts, die andere Layouts enthalten
Versuch es noch einmal. Die meisten Layouts enthalten andere Layouts.
Wenn ein Design eine Flexbox oder ein Raster verwendet.
Versuch es noch einmal. Weder die Flexbox noch das Raster hat etwas speziell für Makrolayouts.
Low-Level-Layouts, die einen kleinen Teil des Bildschirms einnehmen.
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.

Makro-Layouts verwenden immer Medienabfragen, um sich 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. Dies ist das Reich der Mikrolayouts.