クイックヒント：列行をCSSサブグリッドと整列する方法

このCSSグリッドサブグリッドチュートリアルでは、兄弟ボックス内のコンテンツを調整することを示しています。 箱自体がグリッドを使用して正しくサイズになっている場合でも、水平に配置されたボックス内の誤った配分された内部コンポーネントの問題に対処します。

ソリューションは、CSSグリッドの

プロパティを活用します。 これにより、内側のグリッドは親グリッドから列構造を継承し、一貫したアライメントを確保できます。

subgridステップ1：基本的なセットアップ

HTMLは、3つの要素を含む親

を使用します。 最初のCSSは、親を3つの等しい列を持つグリッドとして設定します。

<article></article> <section></section><h1></h1> <ul></ul><div>ステップ2：サブグリッドを有効にします <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> </strong>これにより、各セクション内のコンテンツがそれぞれの列を埋めるようになります。 </p> <p><code>subgrid <section></section>

ステップ3：subgrid

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

との整合

重要なステップは、

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サブグリッドリファレンス

サブグリッドデモの例によるグリッド

レイチェル・アンドリューのサブグリッドYouTube説明

この改良されたバージョンは、より簡潔で構造化された説明を提供し、重要な手順に焦点を当て、マークダウン内に画像を直接組み込みます。 結論は、さらなる学習のために関連するリソースにもリンクしています。