快速提示：如何將列排與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解釋

• 這個改進的版本提供了更簡潔和結構化的解釋，重點介紹了關鍵步驟，並將圖像直接納入降價。 結論還鏈接到有關進一步學習的相關資源。