M

MLOG

Deutsch

Entdecken Sie CSS Subgrid und lernen Sie, wie Sie komplexe, responsive und wartbare verschachtelte Layouts für modernes Webdesign erstellen. Meistern Sie fortgeschrittene Grid-Techniken.

CSS Subgrid: Die Macht verschachtelter Layouts entfesseln

CSS Grid hat das Web-Layout revolutioniert und bietet beispiellose Flexibilität und Kontrolle. Die Verwaltung verschachtelter Grids kann jedoch manchmal umständlich werden. Genau hier kommt CSS Subgrid zur Rettung. Subgrid ermöglicht es einem Grid-Element, die Spalten- und Zeilengrößen seines übergeordneten Grids zu erben, was komplexe Layouts vereinfacht und Ihren Code wartbarer macht. Dieser Artikel bietet eine umfassende Anleitung zum Verständnis und zur Implementierung von CSS Subgrid, komplett mit praktischen Beispielen und Einblicken für Entwickler aller Erfahrungsstufen.

Was ist CSS Subgrid?

Subgrid ist eine Funktion von CSS Grid, die es einem Grid-Element ermöglicht, selbst zu einem Grid zu werden und die vom übergeordneten Grid definierten Zeilen- und Spalten-Spuren zu erben. Das bedeutet, dass Sie Inhalte über mehrere verschachtelte Grids hinweg ausrichten können, ohne explizit Spurengrößen in jedem verschachtelten Grid definieren zu müssen. Stellen Sie es sich als eine Möglichkeit vor, die Struktur des übergeordneten Grids auf seine untergeordneten Elemente auszudehnen und so ein kohäsiveres und konsistenteres Layout zu schaffen.

Warum Subgrid verwenden?

Browserkompatibilität

Bevor Sie mit der Implementierung beginnen, ist es wichtig, die Browserkompatibilität zu überprüfen. Stand Ende 2023 wird Subgrid von modernen Browsern wie Chrome, Firefox, Safari und Edge gut unterstützt. Es ist jedoch immer eine gute Praxis, Can I use zu verwenden, um den neuesten Support-Status zu überprüfen.

Grundlegende Subgrid-Implementierung

Beginnen wir mit einem einfachen Beispiel, um die grundlegenden Konzepte von Subgrid zu veranschaulichen.

HTML-Struktur

Zuerst definieren wir die grundlegende HTML-Struktur für unser Grid.


<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
    <div class="item-3">Item 3</div>
    <div class="item-4">Item 4</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS-Styling

Nun definieren wir das CSS, um das übergeordnete Grid und das Subgrid innerhalb des .content-Elements zu erstellen.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Define placement of items inside the .content subgrid */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

In diesem Beispiel wird das .content-Element als Subgrid definiert. Die Eigenschaften grid-template-columns: subgrid; und grid-template-rows: subgrid; weisen das Subgrid an, die Spurengrößen vom übergeordneten Grid zu erben. Der Inhaltsbereich passt sich nun der im Hauptcontainer-Grid definierten Spurengröße an, ohne dass explizite Einstellungen für das Subgrid selbst erforderlich sind. Dies gewährleistet eine perfekte Ausrichtung zwischen der Seitenleiste und den Elementen im Inhaltsbereich.

Fortgeschrittene Subgrid-Techniken

Spuren überspannen

Subgrid ermöglicht es auch, dass Elemente innerhalb des Subgrids mehrere Spuren überspannen, genau wie in einem regulären Grid. Dies bietet noch mehr Flexibilität bei der Erstellung komplexer Layouts.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Dieser Code bewirkt, dass .item-1 die ersten beiden Spalten des Subgrids überspannt.

Benannte Grid-Linien

Sie können benannte Grid-Linien mit Subgrid für noch mehr Klarheit und Kontrolle verwenden. Nehmen wir an, Sie haben benannte Linien in Ihrem übergeordneten Grid:


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Sie können diese benannten Linien dann innerhalb Ihres Subgrids referenzieren:


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Umgang mit impliziten Spuren

Wenn die Anzahl der Grid-Elemente die Anzahl der definierten Spuren im übergeordneten Grid überschreitet, erstellt Subgrid implizite Spuren. Sie können die Größe dieser impliziten Spuren mit den Eigenschaften grid-auto-rows und grid-auto-columns steuern, ähnlich wie bei einem regulären CSS Grid.

Praktische Beispiele und Anwendungsfälle

Lassen Sie uns einige praktische Beispiele untersuchen, wie Subgrid zur Erstellung anspruchsvoller Layouts verwendet werden kann.

Komplexe Produktauflistung

Stellen Sie sich eine Produktauflistung vor, bei der Sie mehrere Produktdetails (Bild, Name, Beschreibung, Preis) auf konsistente und ausgerichtete Weise anzeigen möchten. Subgrid kann dabei helfen, dies einfach zu erreichen.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p>Description of product 1.</p>
    <span>$99.99</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p>Description of product 2.</p>
    <span>$129.99</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

In diesem Beispiel verwenden die .product-Elemente Subgrid, um Bild, Name, Beschreibung und Preis über alle Produkte hinweg konsistent auszurichten, auch wenn ihre Inhaltslängen variieren. Dies gewährleistet eine saubere und professionelle Präsentation.

Magazin-Layout

Die Erstellung von Layouts im Magazinstil mit variierenden Inhaltsblöcken kann eine Herausforderung sein. Subgrid vereinfacht den Prozess, indem es Ihnen ermöglicht, Elemente über verschiedene Abschnitte des Layouts hinweg auszurichten.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Main Article Title</h2>
    <p>Main article content...</p>
  </div>
  <div class="sidebar-article">
    <h3>Sidebar Article Title</h3>
    <p>Sidebar article content...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Featured Image">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

In diesem Beispiel teilen sich der Hauptartikel, der Seitenleistenartikel und das hervorgehobene Bild alle dieselbe Grid-Struktur, was eine konsistente Ausrichtung von Titeln und Inhalten über verschiedene Abschnitte hinweg sicherstellt. Die Verwendung von Subgrid vereinfacht das CSS und macht das Layout wartbarer.

Formular-Layouts

Die Erstellung komplexer Formular-Layouts mit ausgerichteten Beschriftungen und Eingabefeldern kann knifflig sein. Subgrid bietet eine unkomplizierte Lösung.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Define track sizes in the parent grid */
    gap: 10px;
}

Hier verwenden die .form-row-Elemente Subgrid, um die Beschriftungen und Eingabefelder über alle Zeilen hinweg konsistent auszurichten. Die Spurengrößen werden im übergeordneten Grid (.form-grid) definiert, was ein einheitliches Erscheinungsbild gewährleistet.

Best Practices und Überlegungen

Subgrid vs. reguläres CSS Grid

Obwohl sowohl Subgrid als auch CSS Grid leistungsstarke Layout-Werkzeuge sind, dienen sie unterschiedlichen Zwecken. Reguläres CSS Grid ist ideal für die Erstellung von allgemeinen Seitenlayouts und die Definition der Grundstruktur Ihres Inhalts. Subgrid hingegen eignet sich am besten für die Verwaltung verschachtelter Layouts und die Ausrichtung von Inhalten über mehrere Verschachtelungsebenen hinweg. Betrachten Sie Subgrid als eine Erweiterung von CSS Grid, die komplexe Layout-Szenarien vereinfacht.

Fehlerbehebung bei häufigen Problemen

Fazit

CSS Subgrid ist eine wertvolle Ergänzung zum CSS-Grid-Toolkit und bietet eine leistungsstarke Möglichkeit, komplexe verschachtelte Layouts zu verwalten und visuell ansprechende, wartbare und responsive Webdesigns zu erstellen. Indem Sie die grundlegenden Konzepte verstehen und praktische Beispiele erkunden, können Sie Subgrid nutzen, um anspruchsvolle Layouts zu erstellen, die mit traditionellen CSS-Techniken bisher schwierig oder unmöglich zu erreichen waren. Nutzen Sie Subgrid und erschließen Sie neue Möglichkeiten in Ihren Webentwicklungsprojekten. Subgrid ermöglicht es Ihnen, die Leistungsfähigkeit von CSS Grid wirklich auf die verschachtelten Elemente auszudehnen, was eine größere Kontrolle und Code-Wartbarkeit ermöglicht. Experimentieren Sie damit und entdecken Sie die Vorteile bei der Vereinfachung komplizierter CSS-Layouts.

Weitere Ressourcen