Makro-Layouts

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

Ein Wireframe eines zweispaltigen Layouts neben demselben Layout als eine Spalte für eine schmale Ansicht.

Bevor Sie ein Layout anwenden, sollten Sie darauf achten, dass der Fluss Ihrer Inhalte sinnvoll ist. Diese Standardreihenfolge mit einer Spalte wird auf kleineren Bildschirmen verwendet.

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

Wenn Sie diese einzelnen Komponenten auf Seitenebene anordnen, entwerfen Sie ein Makro-Layout: eine allgemeine Ansicht Ihrer Seite. Mithilfe von Medienabfragen können Sie in CSS Regeln angeben, wie diese Ansicht an verschiedene Bildschirmgrößen angepasst werden soll.

Raster

CSS-Raster ist ein hervorragendes Tool, um ein Layout auf Ihre Seite anzuwenden. Im vorherigen Beispiel möchten Sie möglicherweise ein zweispaltiges Layout verwenden, 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 Breakpoint 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 so 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. Jede Spalte hat eine separate Regel, die beschreibt, wie viel Platz sie einnehmen soll. Im Rasterbeispiel sind dieselben Informationen in einer Regel für das enthaltende Element zusammengefasst.

Benötigen Sie eine Medienabfrage?

Sie müssen nicht immer eine Medienabfrage verwenden. Medienabfragen funktionieren gut, wenn Sie Änderungen an einigen Elementen vornehmen. Wenn das Layout jedoch häufig aktualisiert werden muss, können Ihre Medienabfragen mit vielen Breakpoints unübersichtlich werden.

Angenommen, Sie haben eine Seite voller Kartenkomponenten. Die Karten sind nie breiter als 15em und Sie möchten so viele Karten wie möglich in eine Zeile setzen. Sie könnten Medienabfragen mit Breakpoints wie 30em, 45em und 60em schreiben, aber das ist ziemlich mühsam und schwer zu verwalten.

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

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

Mit Flexbox lässt sich ein ähnliches Layout erzielen. 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, anstatt in Spalten angeordnet zu werden. Wenn Sie Zeilen und Spalten anordnen möchten, verwenden Sie 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 lassen sich dynamische Makro-Layouts mit minimalem CSS und ohne Medienabfragen entwerfen. Das spart Ihnen Arbeit, da die Berechnungen vom Browser übernommen werden. Einige Beispiele für moderne CSS-Layouts, die fließend sind, ohne dass Medienabfragen erforderlich sind, finden Sie unter 1linelayouts.com.

Ihr Wissen wird getestet

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 in einem Design Flexbox oder Raster verwendet wird.
Versuch es noch einmal. Weder Flexbox noch Raster haben etwas Spezielles mit Makro-Layouts zu tun.
Layouts auf niedriger Ebene, die nur einen kleinen Teil des Bildschirms abdecken.
Versuch es noch einmal.
Layouts auf hoher Ebene, die einen großen Teil des Bildschirms abdecken.
🎉 Makro-Layouts sind grundlegende Layouts für eine Seite, die einen großen visuellen Bereich umfassen und häufig mit Medienabfragen zur Seitengröße angepasst werden.

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

Richtig
Versuch es noch einmal. Ein Makro-Layout wird nicht durch die Verwendung von Medienabfragen definiert.
Falsch
🎉 Makro-Layouts können ohne Medienabfrage an Inhalte angepasst werden, den verfügbaren Platz ausfüllen und vieles mehr.

Nachdem Sie nun einige Ideen für Makro-Layouts auf Seitenebene haben, wenden Sie sich den Komponenten auf der Seite zu. Das ist der Bereich der Mikro-Layouts.

Zurück
Internationalisierung
Weiter
Micro-Layouts