Makro-Layouts

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

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

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?

Layouts, die andere Layouts enthalten
Versuch es noch einmal. Die meisten Layouts enthalten andere Layouts.
Wenn ein Design Flexbox oder Raster verwendet.
Versuch es noch einmal. Weder die Flexbox noch das Raster verfügen über spezielle Makro-Layouts.
Low-Level-Layouts, die einen kleinen Teil des Bildschirms abdecken
Versuch es noch einmal.
High-Level-Layouts, 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 für die Seitengröße angepasst werden.

Bei Makro-Layouts werden immer Medienabfragen verwendet, um sich an verschiedene Bildschirmgrößen anzupassen.

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

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.