Micro-Layouts

Wenn wir an Layouts denken, denken wir oft an Designs auf Seitenebene. Kleinere Komponenten auf der Seite können jedoch eigene, in sich geschlossene Layouts haben.

Im Idealfall passen sich diese Layouts auf Komponentenebene automatisch an, unabhängig von ihrer Position auf der Seite. Es kann vorkommen, dass Sie nicht wissen, ob eine Komponente in der Hauptinhaltsspalte, in der Seitenleiste oder in beiden platziert wird. Da Sie nicht genau wissen, wo eine Komponente platziert wird, muss sie sich an ihren Container anpassen können.

Raster

Das CSS-Grid ist nicht nur für Layouts auf Seitenebene geeignet. Das funktioniert auch gut für die Komponenten, die sich darin befinden.

In diesem Beispiel werden mit den ::before- und ::after-Pseudoelementen dekorative Linien auf beiden Seiten einer Überschrift erstellt. Die Überschrift selbst ist ein Grid-Container. Die einzelnen Elemente werden so angeordnet, dass die Zeilen immer den verfügbaren Platz ausfüllen.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

Informationen zum Untersuchen von Rasterlayouts in den Chrome-Entwicklertools

Flexbox

Wie der Name schon sagt, können Sie Flexbox verwenden, um Ihre Komponenten flexibel zu gestalten. Sie können festlegen, welche Elemente in Ihrer Komponente eine Mindest- oder Maximalgröße haben sollen, und die anderen Elemente entsprechend anpassen lassen.

In diesem Beispiel nimmt das Bild ein Viertel des verfügbaren Platzes ein und der Text die anderen drei Viertel. Das Bild wird jedoch nie größer als 200 Pixel.

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

Informationen zum Untersuchen von Flexbox-Layouts mit den Chrome-Entwicklertools

Containerabfragen

Mit Flexbox können Sie das Design auf den Inhalt abstimmen. Sie können die Parameter Ihrer Elemente angeben (wie schmal oder breit sie werden sollen) und dem Browser die endgültige Implementierung überlassen.

Die Komponente selbst kennt ihren Kontext jedoch nicht. Es weiß nicht, ob es im Hauptinhalt oder in einer Seitenleiste verwendet wird. Das kann die Gestaltung von Komponenten schwieriger machen als die von Seiten. Damit kontextbezogene Stile angewendet werden können, müssen Ihre Komponenten mehr als nur die Größe des Darstellungsbereichs kennen, in dem sie sich befinden.

Bei Seitenlayouts kennen Sie die Breite des Containers, da der Container der Browser-Darstellungsbereich ist. Media-Anfragen geben die Abmessungen des Containers auf Seitenebene an.

Verwenden Sie Containerabfragen, um die Abmessungen eines Containers zu melden.

Legen Sie zuerst fest, welche Elemente als Container fungieren sollen.

main,
aside {
  container-type: inline-size;
}

Das bedeutet, dass Sie die Inline-Dimension abfragen möchten. Bei englischsprachigen Dokumenten ist das die horizontale Achse. Sie ändern die Stile basierend auf der Breite des Containers.

Wenn sich eine Komponente in einem dieser Container befindet, können Sie Stile ähnlich wie bei Media-Anfragen anwenden.

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

Wenn sich ein Media-Objekt in einem Container befindet, der schmaler als 25em ist, werden die Flexbox-Stile nicht angewendet. Bild und Text sind vertikal angeordnet.

Wenn das enthaltende Element jedoch breiter als 25em ist, werden Bild und Text nebeneinander angezeigt.

Mit Containerabfragen können Sie Komponenten unabhängig voneinander gestalten. Sie können Regeln basierend auf der Breite des enthaltenden Elements schreiben. Die Breite des Viewports spielt keine Rolle mehr.

Abfragen kombinieren

Sie können Media-Queries für das Seitenlayout und Container-Queries für die Komponenten auf der Seite verwenden.

Hier hat die Gesamtstruktur der Seite ein main-Element und ein aside-Element. Beide Elemente enthalten Media-Objekte.

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

Eine Media-Query wendet ein Rasterlayout auf die Elemente main und aside an, wenn der Darstellungsbereich breiter als 45em ist.

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

Die Containerabfrageregel für die Media-Objekte bleibt unverändert: Ein horizontales Flexbox-Layout wird nur angewendet, wenn das enthaltende Element breiter als 25em ist.

Containerabfragen sind ein Gamechanger für Mikrolayouts. Ihre Komponenten können in sich geschlossen und unabhängig vom Browser-Viewport sein.

Dein Wissen wird getestet

Testen Sie Ihr Wissen zu Mikrolayouts.

Zuvor haben Sie etwas über Makrolayouts auf Seitenebene gelernt. Jetzt wissen Sie mehr über Mikrolayouts auf Komponentenebene.

Als Nächstes werden wir uns die einzelnen Bausteine Ihres Contents genauer ansehen und erfahren, wie Sie Ihre Bilder responsiv gestalten können. Zuerst erfahren Sie mehr über reaktionsfähige Typografie.