快速提示：如何将列排与CSS子格里德对齐

此CSS网格子网格教程演示了同胞盒中的内容。 它解决了水平排列框中未对准内部组件的问题，即使使用网格正确尺寸的盒子本身。

该解决方案利用CSS网格的subgrid属性。 这允许内部网格从其父栅格继承列结构，从而确保一致的对齐。

>

步骤1：基本设置

> HTML使用一个父

包含三个<article></article>元素，每个元素都带有<section></section>>，<h1></h1>和<ul></ul>。 初始CSS将父将父置为带有三个相等列的网格：> <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>步骤2：启用子格里德<p><strong>> </strong>要利用</p>，每个<p>也必须是一个网格：<ancy>> <code>subgrid <section></section>这使每个部分中的内容都填充其各自的列。

>

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

>步骤3：与subgrid

对齐 至关重要的步骤是在 css中设置>>>>>

>grid-template-rows: subgrid;使内网格从父遗传了行结构。 grid-row: span 3;确保内部内容跨越所有行。 <section></section>删除从父栅格继承的任何间距。

>

<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;>浏览器兼容性：

>子网格支持现在在主要浏览器中都非常出色。

>

更多资源：

mdn子格里德参考

网格以示例subgrid demos 雷切尔·安德鲁（Rachel Andrew）的子网格YouTube解释

• 这个改进的版本提供了更简洁和结构化的解释，重点介绍了关键步骤，并将图像直接纳入降价。 结论还链接到有关进一步学习的相关资源。