Quick Tip: How to Align Column Rows with CSS Subgrid

This CSS Grid subgrid tutorial demonstrates aligning content within sibling boxes. It addresses the issue of misaligned internal components in horizontally arranged boxes, even when the boxes themselves are correctly sized using Grid.

The solution leverages CSS Grid's subgrid property. This allows inner grids to inherit the column structure from their parent grid, ensuring consistent alignment.

Step 1: Basic Setup

The HTML uses a parent <article></article> containing three <section></section> elements, each with an <h1></h1>, <ul></ul>, and <div>. The initial CSS sets the parent as a grid with three equal columns: <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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897521347074.jpg" class="lazy" alt="Quick Tip: How to Align Column Rows with CSS Subgrid "></p> <p><strong>Step 2: Enabling Subgrid</strong></p> <p>To utilize <code>subgrid, each <section></section> must also be a grid:

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

This makes the content within each section fill its respective column.

Step 3: Aligning with Subgrid

The crucial step is setting grid-template-rows: subgrid; and grid-row: span 3; within the <section></section> CSS:

<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; makes the inner grid inherit the row structure from the parent. grid-row: span 3; ensures the inner content spans all rows. gap: 0; removes any spacing inherited from the parent grid.

Browser Compatibility:

Subgrid support is now excellent across major browsers.

Further Resources:

• MDN subgrid reference
• Grid by Example subgrid demos
• Rachel Andrew's subgrid YouTube explanation

This improved version provides a more concise and structured explanation, focusing on the key steps and incorporating the images directly within the markdown. The conclusion also links to relevant resources for further learning.