Alai

このシリーズの最初の記事では、グリッド コンテナの作成方法と、グリッドを構成する親要素に適用するさまざまなプロパティを見てきました。 グリッドができると、グリッド線のセットができます。

We will cover:

1. 配置プロパティ grid-column-start、grid-column-end、grid-row-start、grid-row-end およびそれらのショートカット grid-columnと grid-row…
2. 行番号で配置する grid-area の方法.
3. 行名で配置する方法

アイテムを配置するときの暗黙的グリッドと明示的グリッドの違い

4. spanキーワードを使う、subgridを少しおまけでつける

自動配置と配置したアイテムを混ぜるときの注意点

• パート1.自動配置と配置したアイテムの混合の注意点は何か？ グリッドコンテナの作成
• Part 2: グリッド線
• Part 3: グリッドテンプレート領域

Basic Concepts Of Line-Based Positioning

グリッド上にアイテムを配置するには、アイテムを開始する線、そして終了したい線に設定します。 したがって、5 列 5 行のグリッドで、アイテムを 2 列目と 3 列目のトラック、および 1 行目と 2 行目と 3 行目のトラックに配置する場合は、次の CSS を使用します。 トラックそのものではなく、行をターゲットにしていることを忘れないでください。

.item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4;}

これは、スラッシュの前の値が開始行で、後の値が終了行であるという省略形として指定することも可能です。

.item { grid-column: 2 / 4; grid-row: 1 / 4;}

CodePen では、この例を見て、項目がまたがる行を変更できます。

Rachel Andrew (@rachelandrew) による Pen Grid Lines: placement shortands を CodePen で見てください。

Note that our box background stretches over the entire area is because the initial values of the alignment properties align-self and justify-self are stretch.

アイテムを 1 トラックにわたってのみ使用するなら、終了行は省いてかまいません。 前回の記事のように、アイテムを自動配置すると、各アイテムは1つのセルに入り、1列と1行のトラックにまたがることがわかります。 つまり、アイテムを 2 行目から 3 行目まで配置するには、次のように記述します：

.item { grid-column: 2 / 3;}

また、最後の行を削除することも完全に正しいです：

.item { grid-column: 2;}

grid-area Shorthand

grid-areaを使ってアイテムを配置することもできます。 このプロパティは今後の記事で改めて紹介しますが、行番号と一緒に使うと4行すべてを設定することができます。

.item { grid-area: 1 / 2 / 4 / 4;}

この行番号の順番は、grid-row-start、grid-column-start、grid-row-end、grid-column-endの順です。 英語のように左から右へ書く横書き言語の場合は、上、左、下、右となります。 これは、通常 CSS で margin などの短縮形を指定する方法とは逆で、top, right, bottom, left となります。

この理由は、グリッドはどの書き方や方向でも同じように動作するからです。 したがって、両方の開始を設定してから両方の終了を設定する方が、値を画面の物理的な寸法に対応させるよりも理にかなっています。 私はこのプロパティを行ベースの配置に使用することはあまりなく、grid-column と grid-row の 2 つの値のショートカンドの方がスタイル シートをスキャンするときに読みやすいと思うからです。 明示的なグリッドとは、grid-template-columns と grid-template-rows プロパティを使用して作成するグリッドのことです。 列と行のトラックを定義することにより、それらのトラックの間、およびグリッドの開始と終了の端に線も定義します。 番号付けは、ブロックとインラインの両方において、開始端の 1 から始まります。 もしあなたが横書きで、左から始まり右に向かって進む文章を書くのであれば、ブロック方向の1行目はグリッドの一番上にあり、インライン方向の1行目は左側の行であることを意味します。

水平 RTL 言語で作業している場合、たとえばアラビア語のように、ブロック方向の行 1 はまだ上部にありますが、インライン方向の行 1 は右側にあります。

縦書きモードで作業している場合、下の画像でwriting-mode: vertical-rlを設定すると、行1はその書き込みモードのブロック方向の開始位置、この場合右側となります。

したがって、グリッド線は文書やコンポーネントのWriting ModeやScript方向と結びついています。

明示グリッドの終了行は-1番でそこから行数を戻し、-2行が最後から2行目にあたります。 つまり、明示的なグリッドのすべてのトラックにわたってアイテムを配置したい場合は、次のようにします：

.item { grid-column: 1 / -1;}

Lines On The Implicit Grid

もし、暗黙のグリッドトラックを作成した場合は、それらも1からカウントアップされます。 以下の例では、列用の明示的なグリッドを作成しましたが、行トラックは暗黙的なグリッドに作成され、grid-auto-rows を使用してこれらを 5em にサイズ調整しています。

クラス placed を持つアイテムは、行 1 から行 -1 にわたって配置されています。 2 行のための明示的グリッドを使っていた場合、アイテムは 2 行にわたるはずです。 行のトラックは暗黙的なグリッドで作成されているため、行 -1 は 3 行目ではなく 2 行目に解決されました。

See the Pen Grid Lines: explicit vs. implicit grid by Rachel Andrew (@rachelandrew) on CodePen.

暗黙的グリッドの最終行をターゲットにする方法は、現在ありません。

Placeing Items against Named Lines

前回の記事では、行番号に加えて、オプションでグリッド上の行に名前を付けることができることを説明しました。

.grid { display: grid; grid-template-columns: 1fr 2fr 2fr ;}

名前の付いた行をいくつか作成したら、アイテムを配置するときに行番号を名前に置き換えることができます。

If your line has several names, you can pick which one like when placing your item, all the names will resolve to that same line.

Note: ラインに名前を付けると面白いことがいくつか起こります。 詳細は、「CSS グリッド レイアウトでの名前の付け方」を参照してください。

What Happens If There Are Multiple Lines With the Same Name?

同じ名前を持つ複数の行がある場合、いくつかの興味深い動作が発生します。 これは、repeat() 記法で行に名前を付けると起こりうる状況です。 下の例では、1fr 2frのパターンを4回繰り返して、8列のグリッドを作っています。 小さいトラックの前の行をsm、大きいトラックの前の行をlgと名付けました。 4982>

このような場合、名前をインデックスとして使用することができます。 つまり、2行目のsmという名前から始まり、3行目のlgという名前までアイテムを配置するには、grid-column: sm 2 / lg 3を使用します。

See the Pen Grid Lines: Naming lines by Rachel Andrew (@rachelandrew) on CodePen.

Span キーワードの使用

あるアイテムが特定の数のトラックにまたがることが分かっているが、それがグリッド上のどこに位置するかは正確に分かっていない、という状況があります。 例えば、自動配置を使用してアイテムを配置しているが、デフォルトの 1 トラックではなく、複数のトラックにまたがるようにしたい場合です。 この場合、span キーワードを使用することができます。 以下の例では、私のアイテムは auto 行から始まり、この行は自動配置で配置され、その後 3 トラックにまたがります。

.item { grid-column: auto / span 3;}

See the Pen Grid Lines: span keyword by Rachel Andrew (@rachelandrew) on CodePen.

This technique will be very useful when we have wide support the subgrid value for grid-template-columns and grid-template-rows…このテクニックは、subgrid 値が広くサポートされたときに、非常に便利になります。 たとえば、カードにヘッダーとメイン コンテンツ領域があり、互いに整列させたいカード レイアウトでは、通常の自動配置動作を可能にしたまま、各カードを 2 行にまたがるようにすることができます。 個々のカードは行にsubgridを使用します（つまり、それぞれ2行を取得します）。 subgrid の詳細については、私の記事 CSS Grid Level 2: Here Comes Subgrid をお読みください。

See the Pen Grid Lines: span keyword and subgrid by Rachel Andrew (@rachelandrew) on CodePen.

/

Layering Items With Line-Based Placement

グリッドはグリッド上の空のセルに項目を自動配置し、同じセルに項目を重ねることはありません。 しかし、ライン ベースの配置を使用すると、同じグリッド セルにアイテムを配置することができます。 次の例では、2 行のトラックにまたがる画像と、2 番目のトラックに配置され、半透明の背景が与えられたキャプションがあります。

See the Pen Grid Lines: card with layered elements by Rachel Andrew (@rachelandrew) on CodePen.

Items will stack up in the order that they appear in the document source.これは、ドキュメント ソースの表示順に積み上げられます。 したがって、上記の例では、キャプションは画像の後にあり、したがって画像の上に表示されます。 もしキャプションが先に来ていたら、画像の後ろに表示されてしまい、見ることができないでしょう。 この積み重ねは、z-indexプロパティで制御することができます。 キャプションを先に表示することが重要な場合、z-indexを使用し、キャプションの値を画像より大きくすることができます。 これは、キャプションが画像の上に表示されるようにするもので、キャプションを読むことができます。 アイテムがグリッドに完全に自動配置されると、アイテムはグリッド上に順次配置され、それぞれが次の利用可能な空きスペースを見つけて配置します。

CodePen 上の Rachel Andrew (@rachelandrew) による Pen Grid Lines: auto-placement を参照してください。

デフォルトの動作は常に前進し、アイテムがグリッドにフィットしない場合は隙間を空けるようになっています。 この動作は、プロパティ grid-auto-flow に値 dense を指定することで制御できます。 この場合、グリッドにすでに残されたギャップに合うアイテムがあれば、ギャップを埋めるためにソース順から外れて配置されます。 密なパッキングを使用した以下の例では、アイテム 3 はアイテム 2 の前に配置されました。

See the Pen Grid Lines: auto-placement and dense packing by Rachel Andrew (@rachelandrew) on CodePen.

この動作は、ドキュメントをタブで移動しているユーザーにとって、視覚的なレイアウトが従っているソースの順序と同期しないため、問題を引き起こす可能性があることに注意してください。 配置されたアイテムが最初に配置され、自動配置はアイテムの配置を開始するために最初の利用可能なギャップを探します。

この最後の例では、行ベースの配置プロパティを使用して、アイテム 1 と 2 を配置し、最初の行を空にしました。 後のアイテムは隙間を埋めるために移動しました。

See the Pen Grid Lines: Auto-placement mixed with placed items by Rachel Andrew (@rachelandrew) on CodePen.

この動作は、グリッド上に配置されていない新しい要素をレイアウトに導入した場合に、アイテムが奇妙な場所に配置されてしまうことを意味するので、理解しておく価値があります。 常に番号が振られた線があることを覚えておいてください。他のどのようなグリッドを使っていても、ある線番号から他の線番号にアイテムを配置することができます。 今後の記事で紹介する他の方法は、レイアウトを指定する別の方法ですが、番号付きラインによって作成されたグリッドに基づいています。 グリッドコンテナの作成

その2：グリッド線

その3：グリッドテンプレートエリア