Micro-Layouts

Bei Layouts denken wir oft an Designs auf Seitenebene. Kleinere Komponenten auf der Seite können jedoch eigene eigenständige Layouts haben.

Idealerweise werden diese Layouts auf Komponentenebene automatisch angepasst, unabhängig von ihrer Position auf der Seite. Es kann Situationen geben, in denen Sie nicht wissen, ob eine Komponente in der Spalte mit dem Hauptinhalt, in der Seitenleiste oder in beiden platziert wird. Wenn Sie nicht wissen, wo eine Komponente landet, müssen Sie dafür sorgen, dass sie sich selbst an ihren Container anpassen kann.

GRid

Das CSS-Raster eignet sich nicht nur für Layouts auf Seitenebene. Sie funktioniert auch gut für die darin enthaltenen Komponenten.

In diesem Beispiel erzeugen die Pseudoelemente ::before und ::after dekorative Linien auf beiden Seiten einer Überschrift. Die Überschrift selbst ist ein Rastercontainer. Die einzelnen Elemente sind so angeordnet, dass die Linien 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 Prüfen von Rasterlayouts in den Chrome-Entwicklertools

Flexbox

Wie der Name schon sagt, können Sie mit der Flexbox Ihre Komponenten flexibel 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 und der Text die anderen drei Viertel ein. Aber das Bild wird 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 Überprüfen von Flexbox-Layouts in den Chrome-Entwicklertools

Containerabfragen

Mit der Flexbox können Sie aus den Inhalten heraus ein Design entwickeln. Sie können die Parameter Ihrer Elemente angeben (wie schmal und breit sie werden sollen) und den Browser die endgültige Implementierung überlassen.

Die Komponente selbst hat jedoch kein Bewusstsein für ihren Kontext. Er weiß nicht, ob er im Hauptinhalt oder in einer Seitenleiste verwendet wird. Dadurch können Komponentenlayouts schwieriger sein als Seitenlayouts. Um kontextbezogene Stile anwenden zu können, müssen Ihre Komponenten mehr wissen als die Größe des Darstellungsbereichs, in dem sie sich befinden.

Bei Seitenlayouts wissen Sie die Breite des Containers, da der Container der Darstellungsbereich des Browsers ist. Medienabfragen geben die Abmessungen des Containers auf Seitenebene an.

Mit Containerabfragen können Sie Berichte zu den Dimensionen eines Containers erstellen.

Legen Sie zuerst fest, welche Elemente als Container dienen 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 werden die Stile basierend auf der Breite des Containers ändern.

Befindet sich eine Komponente in einem dieser Container, können Sie Stile auf ähnliche Weise anwenden wie Medienabfragen.

.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 Medienobjekt 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. Die Breite des Darstellungsbereichs spielt keine Rolle mehr. Sie können Regeln schreiben, die auf der Breite des beinhaltenden Elements basieren.

Abfragen kombinieren

Sie können Medienabfragen für das Seitenlayout und Containerabfragen für die Komponenten der Seite verwenden.

Hier besteht die Gesamtstruktur der Seite aus einem main-Element und einem aside-Element. In beiden Elementen befinden sich Medienobjekte.

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

Bei einer Medienabfrage wird ein Rasterlayout auf die Elemente main und aside angewendet, wenn der Darstellungsbereich breiter als 45em ist.

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

Die Containerabfrageregel für die Medienobjekte bleibt gleich: Wenden Sie nur ein horizontales Flexbox-Layout an, wenn das enthaltende Element breiter als 25em ist.

Containerabfragen sind für Mikrolayouts bahnbrechend. Ihre Komponenten können unabhängig vom Darstellungsbereich des Browsers unabhängig sein.

Wissen testen

Testen Sie Ihr Wissen über Mikro-Layouts.

Sie haben bereits etwas über Makro-Layouts auf Seitenebene gelernt. Jetzt kennen Sie Mikro-Layouts auf Komponentenebene. Als Nächstes sehen wir uns die Grundbausteine Ihrer Inhalte genauer an. Sie erfahren, wie Sie Ihre Bilder responsiv machen. Jetzt wollen wir uns die responsive Typografie ansehen.