Schneller Tipp: So richten Sie die Spaltenzeilen mit dem CSS -Subgrid aus

Dieses CSS -Gitter -Subgrid -Tutorial zeigt den Ausrichtungsinhalt innerhalb von Geschwisterboxen. Es befasst sich mit der Frage von falsch ausgerichteten internen Komponenten in horizontal angeordneten Feldern, selbst wenn die Kästchen selbst korrekt mit Gitter geeignet sind.

Die Lösung nutzt die Eigenschaft von CSS Grid. Dies ermöglicht es innere Gitter, die Säulenstruktur aus ihrem übergeordneten Gitter zu erben und eine konsistente Ausrichtung zu gewährleisten. subgrid

Schritt 1: Basic Setup

Die HTML verwendet ein übergeordnetes

, das drei <article></article> Elemente enthält, jeweils mit einem <section></section>, <h1></h1> und <ul></ul>. Das anfängliche CSS legt das Elternteil als Raster mit drei gleichen Spalten fest: <div> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-css&quot;&gt;article { display: grid; grid-template-columns: 1fr 1fr 1fr; }&lt;/code&gt;</pre> <p> <img src="https://img.php.cn/upload/article/000/000/000/173897521347074.jpg" alt="Quick Tip: How to Align Column Rows with CSS Subgrid "> </p> <p> Schritt 2: Subgrid <strong> </strong> aktivieren </p> Um <p> zu verwenden, muss jeweils <code>subgrid auch ein Gitter sein: <section></section>

<code class="language-css">section {
  display: grid;
}</code>

Dadurch füllt der Inhalt in jedem Abschnitt seine jeweilige Spalte aus.

Schritt 3: Ausrichtung mit Subgrid

Der entscheidende Schritt besteht darin

grid-template-rows: subgrid; grid-row: span 3; lässt das innere Gitter die Zeilenstruktur vom Elternteil erben. <section></section> stellt sicher, dass der innere Inhalt alle Zeilen umfasst.

entfernt jeglichen Abstand, der aus dem übergeordneten Raster geerbt wurde.

<code class="language-css">section {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* or grid-row: 1 / 4 */
  gap: 0; /* removes inherited gap */
}</code>

grid-template-rows: subgrid; grid-row: span 3; gap: 0;

Browserkompatibilität:

Subgrid -Unterstützung ist jetzt in den wichtigsten Browsern hervorragend.

Weitere Ressourcen:

MDN Subgrid Reference Gitter mit Beispielsubgrid -Demos

Rachel Andrews Subgrid YouTube Erklärung
• Diese verbesserte Version bietet eine prägnantere und strukturiertere Erklärung, die sich auf die wichtigsten Schritte konzentriert und die Bilder direkt in den Markdown einbezieht. Die Schlussfolgerung verknüpft auch mit relevanten Ressourcen für weiteres Lernen.