グリッド

CSS ポッドキャスト - 011: グリッド

ウェブデザインで非常に一般的なレイアウトは、ヘッダー、サイドバー、本文、フッターのレイアウトです。

長年にわたり、 このレイアウトを解決する方法は多数ありますが、 CSS グリッドを使うと 比較的単純であるだけでなく、 選択肢はたくさんあります グリッドは、コントロールを 本来のサイジングには柔軟性があり この種のレイアウトに最適です。 これは、グリッドが 2 次元コンテンツ用に設計されたレイアウト メソッドであるためです。 つまり、行と列に同時に配置されます。

グリッド レイアウトを作成する際は、行と列からなるグリッドを定義します。 次にそのグリッドにアイテムを配置し 作成したセルに自動的に配置されるようにすることもできます。 グリッドやネットワークの 利用可能なリソースの概要を グリッドレイアウトもすぐに作成できます

概要

では、グリッドではどのようなことができるでしょうか。 グリッド レイアウトには次の機能があります。 このガイドでは、そのすべてについて説明します。

1. グリッドは行と列で定義できます。 これらの行と列のトラックのサイズ設定を選択することも、コンテンツのサイズに応じて変更することもできます。
2. グリッド コンテナの直接の子が、このグリッドに自動的に配置されます。
3. または、正確な場所にアイテムを配置することもできます。
4. グリッド上のラインや領域に名前を付けると、配置しやすくなります。
5. グリッド コンテナの予備スペースはトラック間で分配できます。
6. グリッド アイテムは領域内で配置できます。

グリッドの用語

CSS が本格的なレイアウト システムを使用するのは初めてであるため、グリッドには多くの新しい用語が使われています。

グリッド線

グリッドは線で構成され 水平方向と垂直方向に並んでいます。 グリッドに列が 4 つある場合 最後の列の後を含む 5 列行になります。

行には番号が振られます。 コンポーネントの記述モードとスクリプトの方向に従って番号を付けます。 つまり、列 1 は左から右に記述する言語（英語、 アラビア語のように右から左に表記する言語では

グリッド トラック

トラックとは、2 本のグリッド線の間のスペースです。 行トラックは 2 本の行線の間にあり、列トラックは 2 本の列線の間に存在します。 グリッドを作成する際、トラックにサイズを割り当てて作成します。

グリッドセル

グリッドセルとは、行トラックと列のトラックの交差点によって定義されるグリッド上の最小のスペースです。 これは、表のセルやスプレッドシートのセルに似ています。 グリッドを定義し、どのアイテムも 定義された各グリッドセルに 1 つのアイテムが自動的に配置されます。

グリッド領域

複数のグリッドセル。 グリッド領域は、1 つのアイテムを複数のトラックにまたがって配置することで作成されます。

ギャップ

線路間の溝や路地。 サイズについては、通常のトラックと同様に機能します。 ギャップにコンテンツを配置することはできませんが、グリッド アイテムにまたがるコンテンツは配置できます。

グリッド コンテナ

display: grid が適用された HTML 要素 直接の子に対して新しいグリッド形式設定コンテキストを作成します。

.container {
  display: grid;
}

グリッド アイテム

グリッド アイテムとは、グリッド コンテナの直接の子であるアイテムです。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

行と列

基本的なグリッドを作成するには、3 つの列トラックを含むグリッドを定義します。 2 列のトラックと、トラック間に 10 ピクセルのギャップがあります。

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

このグリッドは、用語セクションで説明した内容の多くを示しています。 3 つの列のトラックがあります。 トラックごとに異なる長さの単位が使用されます。 2 行のトラックがあります。 1 つは長さの単位を使って もう 1 つは自動です Auto のサイズをトラックとして使用した場合は、コンテンツと同じ大きさであると考えることができます。 トラックはデフォルトで自動的に調整されます。

.container クラスの要素に子アイテムがある場合、 すぐにこのグリッドにレイアウトされます。実際の動作は以下のデモで確認できます。

Chrome DevTools のグリッド オーバーレイを使用すると、グリッドのさまざまな部分を理解できます。

Chrome でデモを開きます。 ID が container の灰色の背景の要素を調べます。 DOM の .container 要素の横にあるグリッドバッジを選択して、グリッドをハイライト表示します。 [レイアウト]タブでは プルダウンで [Display Line Numbers] を選択して、グリッドに行番号を表示します。

</ph> <ph type="x-smartling-placeholder">

固有のサイズ設定キーワード

上記で説明した長さと割合のディメンションに加えて、 サイズ単位 グリッド トラックでは、固有のサイズ設定キーワードを使用できます。 これらのキーワードは、Box Sizing の仕様で定義されています。 CSS でボックスのサイズ設定方法を追加し グリッドトラックだけでなく

• min-content
• max-content
• fit-content()

min-content キーワードは、トラック コンテンツがオーバーフローすることなく、トラックを可能な限り小さくします。 グリッド レイアウトの例を変更して、3 列のトラックがすべて min-content サイズになるようにする トラック内の最も長い単語と同じくらい狭くなります。

max-content 効果は逆になります。 トラックの幅は、空白のない 1 つの長い文字列ですべてのコンテンツを表示できる幅になります。 これにより、文字列がラップされないため、オーバーフローが発生する可能性があります。

fit-content() 最初は max-content のように動作します。 ただし、トラックが関数に渡したサイズに達すると、 コンテンツのラップが開始します。 そのため、fit-content(10em) は 10em 未満のトラックを作成します。 max-content のサイズが 10em 未満の場合、 10em 以下にしてください

次のデモでは、グリッド トラックのサイズを変更して、さまざまな固有のサイズ設定キーワードを試します。

fr ユニット

既存の長さのディメンション、割合、およびこれらの新しいキーワードがあります。 グリッド レイアウトでのみ機能する特別なサイズ設定メソッドもあります。 これは fr 単位です。 柔軟な長さ。グリッド コンテナで使用可能なスペースのシェアを表します。

fr 単位は、Flexbox で flex: auto を使用する場合と同様に機能します。 アイテムが配置された後にスペースを割り当てます。 したがって、3 つの列すべてに同じスペースの空き領域を割り当てる必要があります。

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

フランスのユニットは空きスペースを共有するため 固定サイズのギャップや固定サイズのトラックと組み合わせることができます。 固定サイズの要素を持つコンポーネントと、残りのスペースを 2 つ目のトラックが占めるようにするには、 grid-template-columns: 200px 1fr のトラックリストとして使用できます。

比率の単位に異なる値を使用すると、比率でスペースが共有されます。 値が大きいほど、予備のスペースが広くなります。 以下のデモでは、3 つ目のトラックの値を変更します。

minmax() 関数

この関数では、トラックの最小サイズと最大サイズを設定できます。 これは非常に便利です。 上記の fr ユニットの例で、残りのスペースを配分するとします。 次のように記述できます。 minmax() を minmax(auto, 1fr) として使用。 グリッドはコンテンツの本質的なサイズに注目し、 コンテンツに十分なスペースを確保したうえで、利用可能なスペースを割り当てます。 そのため、それぞれのトラックが均等に分配されるとは限りません。 グリッドコンテナ内の すべてのスペースの全体を表示したりできます

グリッド コンテナ内のスペースからギャップを差し引いたものをトラックが強制的に利用するには、minmax を使用します。 トラックサイズとして 1fr を minmax(0, 1fr) に置き換えます。 これにより、最小コンテンツ サイズではなく、トラック 0 の最小サイズになります。 グリッドはコンテナ内の利用可能なサイズをすべて占有し、 ギャップがあればそのサイズを差し引き 残りはフランスの単位に従って分配します

repeat() 表記

同じ列を持つ 12 列のトラック グリッドを作成する場合は、 次の CSS を使用できます。

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

または、gcloud コマンドを使用して repeat():

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

repeat() 関数を使用すると、トラックリストの任意のセクションを繰り返すことができます。 たとえば、トラックのパターンを繰り返すことができます。 通常のトラックと繰り返しセクションを作成することもできます。

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill、auto-fit

トラックのサイズ設定について学んだこと、 minmax()、繰り返します。 グリッドレイアウトで便利なパターンを作成します 列トラックの数を指定せずに、 コンテナ内に収まるだけいくつでも作成することをおすすめします。

これは、repeat() と、auto-fill キーワードまたは auto-fit キーワードを使用して実現できます。 下のデモでは、グリッドはコンテナに収まるだけの 200 ピクセルのトラックを作成します。 新しいウィンドウでデモを開き、ビューポートのサイズを変更するとグリッドがどのように変化するかを確認します。

デモでは、できるだけ多くのトラックを使用します。 ただし、トラックに柔軟性はありません。 端にギャップが入り、次の 200 ピクセルのトラックに十分なスペースが確保されます。 minmax() 関数を追加すると、次のようになります。 最小サイズ 200 ピクセル、最大 1fr で、必要な数だけトラックをリクエストできます。 次に、グリッドが 200 ピクセルのトラックをレイアウトし、残りのスペースを均等に配分します。

これにより、メディアクエリを必要としない 2 次元のレスポンシブ レイアウトが作成されます。

auto-fill と auto-fit には微妙な違いがあります。 次のデモでは、前述の構文を使用してグリッド レイアウトを試します。 グリッドコンテナ内のグリッドアイテムは 2 つだけです auto-fill キーワードを使用すると、空のトラックが作成されていることを確認できます。 キーワードを auto-fit に変更すると、トラックが 0 サイズに折りたたみます。 これは、フレキシブル トラックがスペースを消費することを意味します。

それ以外の場合、auto-fill キーワードと auto-fit キーワードはまったく同じように動作します。 最初のトラックがいっぱいになると、両者の差はなくなります。

自動配置

グリッドの自動配置については、これまでのデモですでに確認しました。 アイテムは、ソースに表示される順序でセルごとに 1 つずつグリッドに配置されます。 多くのレイアウトでは、これだけで十分かもしれません。 より細かい制御が必要な場合は、次の方法をお試しください。 1 つ目は、自動プレースメントのレイアウトを調整することです。

アイテムを列に配置する

グリッド レイアウトのデフォルトの動作では、アイテムは行に沿って配置されます。 代わりに、grid-auto-flow: column を使用してアイテムを列に配置できます。 行トラックを定義する必要があります。定義しない場合、アイテムによって固有の列トラックが作成されます。 すべてを 1 つの長い行に配置できます

これらの値は、ドキュメントの書き込みモードに関連します。 行は常に、ドキュメントまたはコンポーネントの記述モードで文が走る方向に進行します。 次のデモでは、モード grid-auto-flow と writing-mode プロパティの値を変更できます。

スパン トラック

自動配置レイアウト内のアイテムの一部またはすべてを、複数のトラックにまたがって表示することができます。 span キーワードとスパンする行数を、grid-column-end または grid-row-end の値として使用します。

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

grid-column-start は指定していないため、 auto の初期値が使用され、自動プレースメント ルールに従って配置されます。 省略形 grid-column を使用して同じものを指定することもできます。

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

ギャップを埋める

複数のトラックにまたがる一部のアイテムを含む自動配置レイアウト は、グリッドに塗りつぶされていないセルが含まれることがあります。 レイアウトが完全に自動配置されたグリッド レイアウトのデフォルトの動作 常に前進することです アイテムはソース内の順序で配置されます。 order プロパティで変更します。 アイテムを入れるのに十分なスペースがない場合は グリッドに隙間が残り、次のトラックに移動します。

次のデモでこの動作を示します。 このチェックボックスをオンにすると、高密度パッキング モードが適用されます。 これを有効にするには、grid-auto-flow に dense の値を指定します。 この値を設定すると グリッドはレイアウトの後半でアイテムを取得し、それを使用してギャップを埋めます。 つまり、ディスプレイが論理的な順序から切り離されている可能性があります。

アイテムを配置する

CSS グリッドから多くの機能をすでに利用できます。 では、作成したグリッド上でアイテムをどのように配置するかを見てみましょう。

まず注意すべき点は、CSS グリッド レイアウトは番号付きの線のグリッドに基づいているということです。 グリッドに配置する最も簡単な方法は、ある行から別の行に配置することです。 アイテムを配置する他の方法については、このガイドに記載の 番号の付いた行には いつでもアクセスできます

項目を行番号で配置するために使用できるプロパティは次のとおりです。

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

これらの行には、開始行と終了行を一度に設定するための省略形があります。

• grid-column
• grid-row

アイテムを配置するには、アイテムを配置するグリッド領域の開始線と終了線を設定します。

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome DevTools を使用すると、行を視覚的に確認して、アイテムが配置されている場所を確認できます。

行番号は、コンポーネントの記述モードと方向に従います。 次のデモでは、書き込みモードまたは方向を変更します を使用して、テキストの流れに沿ったアイテムの配置がどのように保たれるかを確認します。

アイテムの積み重ね

線を基準にして配置すると、アイテムをグリッドの同じセルに配置できます。 つまり、アイテムを積み重ねたり、 あるアイテムが一部重複する原因になります ソースで後から来るアイテムは、先に来たアイテムの上に重ねて表示されます。 この積み重ね順序は、配置したアイテムと同様に、z-index を使用して変更できます。

負の行番号

grid-template-rows と grid-template-columns を使用してグリッドを作成する場合 明示的グリッドと呼ばれるものです。 これは、自分で定義してトラックにサイズを指定したグリッドです。

この明示的なグリッドの外側にアイテムが表示される場合があります。 たとえば 列トラックを定義してから、行トラックを定義せずにグリッド アイテムの行を複数追加できます。 トラックはデフォルトで自動的に調整されます。 また、定義した明示的なグリッドの外に、grid-column-end を使用してアイテムを配置することもできます。 どちらの場合も、グリッドはレイアウトを機能させるためのトラックを作成します。 これらのトラックは「暗黙的グリッド」と呼ばれます。

ほとんどの場合、暗黙的または明示的なグリッドで作業しても違いはありません。 ただし、行ベースのプレースメントでは、両者の主な違いが生じることがあります。

負の行番号を使用すると、明示的グリッドの最終行からアイテムを配置できます。 これは、アイテムを最初の列から最後の列の行まで展開する場合に便利です。 その場合は grid-column: 1 / -1 を使用できます。 アイテムは明示的なグリッドを横断して右に引き延ばされます。

ただし、これは明示的なグリッドに対してのみ機能します。 自動配置されたアイテムを 3 行のレイアウトにする ここでは、最初のアイテムをグリッドの終端まで拡張します。

そのアイテムを grid-row: 1 / -1 にできると考えるかもしれません。 以下のデモでは、これが機能しないことがわかります。 トラックは暗黙的なグリッド内に作成されます。 -1 を使用してグリッドの最後に到達する手段はありません。

暗黙的トラックのサイズ設定

暗黙的グリッドで作成されたトラックは、デフォルトで自動的にサイズが変更されます。 ただし、行のサイズを制御する場合は、 使用 grid-auto-rows プロパティ、 列の場合は grid-auto-columns。

最小サイズ 10em、最大サイズ auto ですべての暗黙的な行を作成するには:

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

幅 100 ピクセルと 200 ピクセルのトラックのパターンで暗黙的な列を作成するため。 最初の暗黙の列は 100px になります 200px 3 つ目の 100px などです

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

名前付きのグリッド線

行に番号ではなく名前があると、アイテムを簡単にレイアウトに配置できます。 角かっこ内に任意の名前を追加することで、グリッド上の任意の行に名前を付けることができます。 複数の名前を追加できます 同じ角括弧の中にスペースで区切って指定します。 行に名前を付けると、番号の代わりに使用できます。

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

グリッド テンプレートの領域

また、グリッドの領域に名前を付け、その名前を付けた領域にアイテムを配置することもできます。 コンポーネントがどのように表示されるかを CSS 内で直接確認できるため、素晴らしい手法です。

まず、 grid-area プロパティ:

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

名前には、キーワード auto と span 以外の任意の名前を使用できます。 すべてのアイテムに名前を付けたら 使用 grid-template-areas プロパティを使用して、各アイテムが展開するグリッドセルを定義します。 各行は引用符で囲んで定義します。

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

grid-template-areas を使用する場合は、いくつかのルールがあります。

• 値は空のセルを含まない完全なグリッドである必要があります。
• トラックをまたぐには、名前を繰り返します。
• 同じ名前を繰り返して作成されるエリアは長方形にする必要があります。また、接続を解除することはできません。

上記のルールのいずれかに違反すると、値は無効として扱われ、破棄されます。

グリッドに余白を残すには、. または複数を使用し、間に空白文字を入れないでください。 たとえば、グリッドの最初のセルを空のままにするには、一連の . 文字を追加します。

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

レイアウト全体を 1 か所で定義するため、 メディアクエリを使用して簡単にレイアウトを再定義できます。 次の例では、3 つの列に移動する 2 列のレイアウトを作成しました grid-template-columns と grid-template-areas の値を再定義します。 新しいウィンドウでサンプルを開き、ビューポートのサイズを試し、レイアウトの変化を確認します。

また、grid-template-areas プロパティが writing-mode と方向にどのように関連しているかもわかります。 他のグリッド メソッドと同様に使用できます。

省略形のプロパティ

2 つの省略形プロパティを使用すると、グリッドのプロパティの多くをまとめて設定できます。 これらがどのように組み合わされているのかを詳しく分析するまでは、少しわかりにくいかもしれません。 これらを使用するかどうかは、任意です。

grid-template

grid-template プロパティは、grid-template-rows、grid-template-columns、grid-template-areas の省略形です。 最初に行が定義され grid-template-areas の値とともに渡されます。 列のサイズは / の後に追加されます。

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid 件の宿泊施設

grid grid-template の省略形とまったく同じように使用できます。 このように使用すると、受け入れる他のグリッド プロパティが初期値にリセットされます。 完全なセットは次のとおりです。

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

この省略形を使用して、暗黙的なグリッドの動作を定義することもできます。 次に例を示します。

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

配置

グリッド レイアウトでは、このガイドで説明したものと同じ配置プロパティを使用します。 flexbox。 グリッドでは、justify- で始まるプロパティは常にインライン軸で使用されます。 ライティング モードでの文章の進行方向を指定します。

align- で始まるプロパティはブロック軸で使用されます。 手書き入力モードでのブロックの配置方向を指定します。

• justify-content および align-content: グリッド コンテナのトラックの周囲やトラック間に、スペースを追加で配置します。
• justify-self、 align-self: は、グリッド アイテムに適用され、配置されているグリッド領域内で移動できます。
• justify-items、 align-items: をグリッド コンテナに適用して、アイテムのすべての justify-self プロパティを設定します。

余分なスペースの配分

このデモでは、グリッドは固定幅のトラックのレイアウトに必要なスペースよりも大きくなっています。 つまり、グリッドのインライン ディメンションとブロック ディメンションの両方にスペースがあるということです。 align-content と justify-content にさまざまな値を指定して、トラックの動作を確認します。

space-between などの値を使用すると、ギャップがどのように大きくなるかに注意してください。 2 つのトラックにまたがるグリッド アイテムも大きくなり、ギャップによって追加されたスペースを吸収します。

コンテンツの移動

背景色のアイテムは、そのアイテムが配置されているグリッド領域全体に完全に塗りつぶされているように見えます。 justify-self と align-self の初期値が stretch であるためです。

このデモでは、justify-items と align-items の値を変更して、レイアウトがどのように変わるかを確認します。 グリッド領域のサイズは変わらず 代わりに、定義された領域内でアイテムが移動されます。

理解度をチェックする

グリッドに関する知識をテストする

main {
  display: grid;
}

リソース

このガイドでは、グリッド レイアウト仕様のさまざまな部分の概要を説明しました。 詳細については、以下のリソースをご覧ください。

• MDN CSS グリッド レイアウト
• グリッドに関する完全ガイド
• グリッド コンテナの作成
• Chrome DevTools での CSS グリッドの調査
• グリッド形式の学習教材の包括的なコレクション