Positioning Overlay Content with CSS Grid

Keine Neuigkeit für Webentwickler im Jahr 2021: CSS Grid ist ein unglaublich mächtiges Werkzeug für die Erstellung komplexer, unterschiedlicher moderner zweidimensionaler Web-Layouts.

In letzter Zeit habe ich mit CSS Grid und Ausrichtungseigenschaften experimentiert, um Komponentenlayouts zu erstellen, die mehrere überlappende Elemente enthalten. Diese Layouts könnten mit absoluter Positionierung und einer Mischung aus Offset-Werten (top, right, bottom, left), negativen Rändern und Transformationen gestaltet werden. Mit CSS Grid kann die Positionierung von Overlay-Elementen jedoch mit logischeren, lesbareren Eigenschaften und Werten erfolgen. Im Folgenden finden Sie einige Beispiele, bei denen diese Grid-Eigenschaften nützlich sind.

Es ist hilfreich, sich mit den Eigenschaften grid-template-areas und grid-area vertraut zu machen, wenn Sie diese noch nicht kennen.

Expandierende Bilder innerhalb begrenzter Dimensionen

In der Demo gibt es eine Checkbox, die die Überlauf-Sichtbarkeit umschaltet, damit wir sehen können, wo die Bilddimensionen bei größeren Ansichtsfensterbreiten über den Container hinausgehen.

Hier ist ein üblicher Hero-Bereich mit einer Überschrift, die ein Bild überlappt. Obwohl das Bild mit einer max-width begrenzt ist, skaliert es auf dem Desktop ziemlich hoch. Aus diesem Grund hat das Content-Strategy-Team darum gebeten, dass einige der relevanten Seiteninhalte unterhalb des Helden so lange wie möglich im Ansichtsfenster sichtbar bleiben. Durch die Kombination dieser Layout-Technik und einer flexiblen Container-max-height mit der CSS-Funktion clamp() können wir etwas entwickeln, das sich an den verfügbaren Ansichtsfensterplatz anpasst und gleichzeitig das Heldenbild in der Mitte des Containers verankert.

CSS clamp() wird zusammen mit den Vergleichsfunktionen min() und max() in allen modernen Browsern gut unterstützt. Haben Sie sie noch nicht verwendet? Ahmad Shadeed hat in diesem Artikel eine fantastische tiefgehende Analyse durchgeführt.

Öffnen Sie diesen Pen und passen Sie die Größe des Ansichtsfensters an. Basierend auf den Bilddimensionen dehnt sich die Containerhöhe aus, bis sie eine maximale Höhe erreicht. Beachten Sie, dass das Bild weiter wächst und dabei zentriert im Container bleibt. Passen Sie die Ansichtsfensterhöhe an und der Container wird zwischen den von der clamp()-Funktion definierten unteren und oberen Grenzwerten seiner max-height flexibel.

Bevor ich Grid für die Layout-Stile verwendet hätte, hätte ich vielleicht absolute Positionierung für das Bild und den Titel verwendet, einen Padding-Trick mit Seitenverhältnis verwendet, um eine responsive Höhe zu erstellen, und object-fit, um das Seitenverhältnis des Bildes beizubehalten. Etwas wie das hier könnte es schaffen

.container {
  position: relative;
  max-height: clamp(400px, 50vh, 600px);
}

.container::before {
  content: '';
  display: block;
  padding-top: 52.25%;
}

.container > * {
  max-width: 1000px;
}

.container .image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container .title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

Vielleicht ist es möglich, den Code noch weiter zu reduzieren, aber es ist immer noch eine ganze Menge Styling nötig. Die Verwaltung desselben responsiven Layouts mit CSS Grid vereinfacht diese Layout-Stilregeln und macht den Code lesbarer. Schauen Sie sich das in der folgenden Iteration an

.container {
  display: grid;
  grid-template: "container";
  place-items: center;
  place-content: center;
  overflow: hidden;
  max-height: clamp(450px, 50vh, 600px);
}

.container > * {
  grid-area: container;
  max-width: 1000px;
}

place-content: center weist das Bild an, sich weiterhin von der Mitte des Containers aus zu dehnen. Entfernen Sie diese Zeile und Sie werden sehen, dass das Bild, obwohl es durch place-items vertikal zentriert ist, oben am Containerblock klebt und darüber hinaus wächst, sobald die max-height erreicht ist. Setzen Sie place-content: end center und Sie werden sehen, dass das Bild über den oberen Rand des Containers hinausragt.

Dieses Verhalten mag konzeptionell ähnlich erscheinen wie die Anwendung von object-fit: cover auf ein Bild als Styling-Methode, um sein intrinsisches Seitenverhältnis zu erhalten, während es auf die Größe seiner Content-Box-Dimensionen skaliert wird (es wurde in der absolut positionierten Iteration verwendet). In diesem Grid-Kontext steuert das Bildelement jedoch die Höhe seines übergeordneten Elements und sobald die max-height des übergeordneten Elements erreicht ist, dehnt sich das Bild weiter aus, behält sein Verhältnis bei und bleibt vollständig sichtbar, wenn der Überlauf des übergeordneten Elements angezeigt wird. object-fit könnte hier sogar mit der Eigenschaft aspect-ratio verwendet werden, um ein konsistentes Seitenverhältnis-Muster für das Heldenbild zu erstellen

.container .image {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

Die Overlay-grid-area

Bei den direkten Kindern des Containers ordnet grid-area jedes von ihnen so an, dass sie denselben Raum überlappen. In diesem Beispiel macht grid-template-areas mit der benannten Grid-Area den Code etwas lesbarer und eignet sich gut als Muster für andere Overlay-ähnliche Layouts innerhalb einer Komponentenbibliothek. Das bedeutet, dass es möglich ist, dasselbe Ergebnis zu erzielen, indem die Template-Regel entfernt und anstelle von grid-area: container ganze Zahlen verwendet werden.

.container > * {
  grid-area: 1 / 1;
}

Dies ist eine Kurzform für grid-row-start, grid-column-start, grid-row-end und grid-column-end. Da die Geschwister in dieser Demo alle denselben einzelnen Zeilen-/Spaltenbereich teilen, müssen nur die Startlinien für das gewünschte Ergebnis gesetzt werden.

place-self zum Platzieren von sich selbst festlegen

Ein weiteres übliches Overlay-Muster ist in Bildkarussells zu sehen. Interaktive Elemente werden oft über dem Karussell-Viewport platziert. Ich habe die erste Demo erweitert und das statische Heldenbild durch ein Karussell ersetzt.

Gleiche Geschichte wie zuvor: Dieses Layout könnte auf absolute Positionierung zurückfallen und ganze Zahlen in einer Handvoll von Eigenschaften verwenden, um Elemente um ihren übergeordneten Container herum zu verschieben und zu ziehen. Stattdessen verwenden wir die Grid-Layout-Regelsätze aus der vorherigen Demo wieder. Sobald sie angewendet sind, sieht es so aus, wie Sie es erwarten würden: Alle untergeordneten Elemente werden innerhalb des Containers zentriert und überlappen sich gegenseitig.

Der nächste Schritt ist die Festlegung von Ausrichtungswerten für einzelne Elemente. Die Eigenschaft place-self — eine Kurzform für align-self und justify-self — bietet eine granulare Kontrolle über die Position eines einzelnen Elements innerhalb des Containers. Hier sind die Layout-Stile insgesamt:

.container {
  display: grid;
  grid-template:"container";
  place-items: center;
  place-content: center;
  overflow: hidden;
  max-height: clamp(450px, 50vh, 600px);
}

.container > * {
  grid-area: container;
  max-width: 1000px;
}

.title {
  place-self: start center;
}

.carousel-control.prev {
  place-self: center left;
}

.carousel-control.next {
  place-self: center right;
}

.carousel-dots {
  place-self: end center;
}

Es gibt nur ein kleines Problem: Der Titel und die Karussell-Punktindikatoren werden in den Überlauf gezogen, wenn das Bild die Containerdimensionen überschreitet.

Um diese Elemente ordnungsgemäß innerhalb des übergeordneten Elements zu umschließen, muss ein grid-template-row-Wert 100% des Containers betragen, hier als eine Fraktionseinheit gesetzt.

.container {
  grid-template-areas: "container";
  grid-template-rows: 1fr;
}

Für diese Demo habe ich mich auf die Kurzform grid-template verlassen (die wir später in diesem Artikel noch einmal sehen werden).

.container {
  grid-template: "container" 1fr;
}

Nach dieser kleinen Aktualisierung bleiben die Overlay-Elemente innerhalb des übergeordneten Containers, auch wenn die Karussellbilder über die Grenzen des Karussells hinausgehen.

Ausrichtung und benannte grid-template-areas

Verwenden wir die vorherigen Overlay-Layout-Methoden für ein weiteres Beispiel. In dieser Demo enthält jede Box Elemente, die in verschiedenen Bereichen über einem Bild positioniert sind.

Für die erste Iteration wird eine benannte Template-Area deklariert, um die Kinder über den Platz des übergeordneten Elements zu legen, ähnlich wie in den vorherigen Demos.

.box {
  display: grid;
  grid-template-areas: "box";
}

.box > *,
.box::before {
  grid-area: box;
}

Das Bild und das halbtransparente Overlay bedecken nun den Box-Bereich, aber diese Stilregeln dehnen auch die anderen Elemente über den gesamten Bereich aus. Das scheint der richtige Zeitpunkt für place-self zu sein, um diese Elemente mit etwas Ausrichtungszauber zu bestreuen!

.tag {
  place-self: start;
}

.title {
  place-self: center;
}

.tagline {
  place-self: end start;
}

.actions {
  place-self: end;
}

Das sieht großartig aus! Jedes Element ist an seinen definierten Stellen über dem Bild positioniert, wie beabsichtigt. Naja, fast. Es gibt eine kleine Nuance im unteren Bereich, wo sich die Tagline und die Aktionsschaltflächen befinden. Fahren Sie mit der Maus über ein Bild, um die Tagline anzuzeigen. Das mag mit einer kurzen Textzeile auf einem Desktop-Bildschirm in Ordnung sein, aber wenn die Tagline länger wird (oder die Boxen im Ansichtsfenster kleiner werden), wird sie schließlich hinter den Aktionsschaltflächen erscheinen.

Um dies zu bereinigen, verwendet grid-template-areas benannte Bereiche für die Tagline und die Aktionen. Die Regel grid-template-columns wird eingeführt, damit sich der Aktionscontainer nur so weit skaliert, wie es seine Schaltflächen erfordern, während die Tagline den Rest des Inline-Bereichs mit dem Wert 1fr ausfüllt.

.box {
  display: grid;
  grid-template-areas: "tagline actions";
  grid-template-columns: 1fr auto;
}

Dies kann auch mit der Kurzform grid-template kombiniert werden. Die Spaltenwerte werden nach einem Schrägstrich definiert, wie hier:

.box {
  grid-template: "tagline actions" / 1fr auto;
}

Die grid-area wird nun in ganze Zahlen umgewandelt, da das Schlüsselwort "box" entfernt wurde.

.box > *,
.box::before {
  grid-area: 1 / 1 / -1 / -1;
}

Nun sollten alle Elemente so aussehen, wie sie zuvor aussahen. Jetzt zum letzten Schliff. Die Schlüsselwörter tagline und actions werden als Werte für ihre jeweiligen Element-grid-area gesetzt.

.tagline {
  grid-area: tagline;
  place-self: end start;
}

.actions {
  grid-area: actions;
  place-self: end;
}

Wenn Sie nun mit der Maus über die Karten in der Demo fahren, wird die Tagline in mehrere Zeilen umgebrochen, wenn der Text zu lang wird, anstatt über die Aktionsschaltflächen hinaus zu ragen, wie es zuvor der Fall war.

Benannte Grid-Linien

Wenn wir uns die erste Iteration dieses Codes noch einmal ansehen, mochte ich es sehr, dass grid-area standardmäßig auf das Schlüsselwort box gesetzt war. Es gibt eine Möglichkeit, dies zurückzubekommen.

Ich werde einige benannte Grid-Linien zum Template hinzufügen. In der untenstehenden Regel grid-template definiert die erste Zeile die benannten Template-Bereiche, die auch die Zeile repräsentieren. Nach dem Schrägstrich folgen die expliziten Spaltengrößen (zur besseren Lesbarkeit in eine neue Zeile verschoben). Die benutzerdefinierten Bezeichner [box-start] und [box-end] repräsentieren den box-Bereich.

.box {
  display: grid;
  grid-template: 
    [box-start] "tagline actions" [box-end] /
    [box-start] 1fr auto [box-end];
}

.box > *,
.box::before {
  grid-area: box;
}

Die Übergabe eines Namens mit der -start und -end-Syntax in Klammern definiert einen Bereich für diesen Namen. Dieser Name, bekannt als Custom Ident, kann alles sein, aber Wörter aus der CSS-Spezifikation sollten vermieden werden.

Logische Platzierungswerte

Einer der wirklich interessanten Teile, die man in diesem letzten Beispiel beobachten kann, ist die Verwendung von logischen Werten wie start und end zur Platzierung von Elementen. Wenn sich die direction oder writing-mode ändern, würden sich die Elemente entsprechend neu positionieren.

Wenn die Richtung "Rechts nach Links" aus dem Dropdown-Menü ausgewählt wird, werden die Inline-Start- und -Endpositionen umgekehrt. Dieses Layout ist bereit, Sprachen wie Arabisch oder Hebräisch zu unterstützen, die von rechts nach links gelesen werden, ohne dass vorhandenes CSS überschrieben werden muss.

Zusammenfassung

Ich hoffe, Sie haben diese Demos genossen und sie bieten Ihnen neue Ideen für Ihre eigenen Projektlayouts – ich habe eine Sammlung von Beispielen zusammengestellt, die Sie sich bei CodePen ansehen können. Die Leistungsfähigkeit des CSS Grid-Standards ist unglaublich. Nehmen Sie sich einen Moment Zeit, um über die Tage des Verwendung von Floats und eines Clearfix für das primitive Grid-Zeilen-Design nachzudenken, und kehren Sie dann zur Gegenwart zurück und bewundern Sie das glorreiche Layout und die Anzeigeeigenschaften des heutigen CSS. Diese Dinge gut zu machen ist keine leichte Aufgabe, also applaudieren wir den Mitgliedern der CSS-Arbeitsgruppe. Der Webspace entwickelt sich ständig weiter und sie machen ihn zu einem angenehmen Ort zum Aufbauen.

Jetzt lassen wir Container Queries los und lassen die Party richtig beginnen.