このCSSグリッドサブグリッドチュートリアルでは、兄弟ボックス内のコンテンツを調整することを示しています。 箱自体がグリッドを使用して正しくサイズになっている場合でも、水平に配置されたボックス内の誤った配分された内部コンポーネントの問題に対処します。
ソリューションは、CSSグリッドの
subgridステップ1：基本的なセットアップ
HTMLは、3つの要素を含む親
を使用します。 最初のCSSは、親を3つの等しい列を持つグリッドとして設定します。
<article></article> <section></section><h1></h1>
<ul></ul><div>ステップ2：サブグリッドを有効にします <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>article {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
<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>
<strong>
</strong>これにより、各セクション内のコンテンツがそれぞれの列を埋めるようになります。
</p> <p><code>subgrid
<section>
section {
display: grid;
}との整合
重要なステップは、css：
内に
を設定することです。
内側のグリッドが親から行構造を継承します。内部コンテンツがすべての行に及ぶことを保証します。 grid-template-rows: subgrid;親グリッドから継承された間隔を削除します
grid-row: span 3; <section>
section {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* or grid-row: 1 / 4 */
gap: 0; /* removes inherited gap */
}ブラウザ互換性：grid-template-rows: subgrid; grid-row: span 3;
gap: 0;サブグリッドサポートは、主要なブラウザで優れているようになりました。
その他のリソース：
mdnサブグリッドリファレンス
サブグリッドデモの例によるグリッドレイチェル・アンドリューのサブグリッドYouTube説明
この改良されたバージョンは、より簡潔で構造化された説明を提供し、重要な手順に焦点を当て、マークダウン内に画像を直接組み込みます。 結論は、さらなる学習のために関連するリソースにもリンクしています。以上がクイックヒント：列行をCSSサブグリッドと整列する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
