グリッド

docs.scrimba.com

ページの上部にヘッダー、左側にサイドバー、メインコンテンツエリア、下部にフッターがあるレイアウトを考えてください。コンテナをネストして各要素を位置に調整することもできますが、レイアウトを変更する必要が出た時点で問題が生じます。CSSグリッドはこのような問題のために設計されました。行と列を同時にページをレイアウトしることです。レイアウトをトラックのセットとして記述できれば、ラッパーやfloatでの調整の大部分は不要になります。

グリッドコンテナ

任意の要素に display: grid を指定するとグリッドになります。その要素は**グリッドコンテナ**になり、直接の子要素が定義するグリッド内のアイテムになります。単独では display: grid はあまり機能しないため、列と行の数とそれぞれのサイズを指定する必要があります。

列は grid-template-columns で行は grid-template-rows で記述します。リスト内の各値は1つのトラック、つまり単一の列または行です。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;   /* 2つの列：固定幅と残り全て */
  grid-template-rows: 80px 400px;     /* 2つの行：短い行と高い行 */
}

要素に display: grid を設定すると**グリッドコンテナ**になり、直接の子要素が定義するグリッド上に配置されるグリッドアイテムになります。これは単一軸に沿ってアイテムをレイアウトするflexboxの2次元版です。Flexboxは「このアイテム行（または列）はどのように空間を共有するべきか？」と問いかけ、グリッドは「これらのアイテムはどこに行と列に座るのか？」と問いかけます。

トラックは grid-template-columns と grid-template-rows で定義します。各値は1つのトラック（列または行）であり、値は異なるユニットを混在させることができます。固定長、パーセンテージ、または次のセクションで説明する柔軟な fr ユニットです。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;   /* 固定幅サイドバー、柔軟なメイン列 */
  grid-template-rows: auto 1fr auto;  /* ヘッダーはコンテンツに合わせて、メインは埋めて、フッターはコンテンツに合わせて */
}

display: grid はその要素に**グリッドフォーマットコンテキスト**を確立します。その要素はグリッドコンテナになり、直接の子要素がグリッドアイテムになり、これまでそれらの子要素に適用されていた通常フローのルールは適用されなくなります。テキストノードは無名アイテムでラップされ、float や vertical-align などのプロパティはアイテムに対して影響を失います。なぜならアイテムの配置はグリッドの役割だからです。

flexboxとの違いは次元性にあり、最初に正しく判断することが重要です。Flexboxは1次元的です。メイン軸に沿ってアイテムを配置し、副作用としてラップしますが、副軸でコンテンツを一致するグリッドに配置しません。グリッドは2次元的です。行と列を一緒に定義するため、アイテムの行位置と列位置は独立して設定され、アイテムは両軸で同時に配置されます。明示的なトラックは grid-template-columns と grid-template-rows で定義し、各値が1つのトラックを生成します。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;   /* 2つの明示的な列トラック */
  grid-template-rows: auto 1fr auto;  /* コンテンツ、埋める、コンテンツ */
}

auto キーワードはトラックをそのコンテンツに合わせてサイズします。1fr は余った空間を吸収します。これが次のセクションが構築する仕組みです。

Junoグリッドコンテナ 要素に display: grid を追加するとグリッドコンテナになり、直接の子要素がアイテムとしてその中に座ります。次に grid-template-columns と grid-template-rows で必要な列と行の数を指定します。トラックを定義されるまで何も配置されないため、これが常に最初のステップです。

Junoグリッドコンテナ Flexboxは1つの軸に沿って機能し、グリッドは行と列で一緒に機能するため、ページレイアウトがグリッドでより自然に感じられます。display: grid を設定し、grid-template-columns と grid-template-rows でトラックをリストします。2次元の配置でアイテムを配置する場合はグリッドを、1行または1列を配置する場合はflexboxを使用してください。

Junoグリッドコンテナdisplay: grid はグリッドフォーマットコンテキストを作成するため、子要素は通常フローに従わなくなり、float と vertical-align は静かに無関係になります。Flexboxとの本当の分割は次元性です。Flexは1軸に沿って配置し、グリッドは両軸で同時に配置します。行位置と列位置が両方とも意味を持つ場合はグリッドを、1つの軸だけが重要な場合はflexを選択してください。

柔軟なトラック

固定ピクセル列は問題ありませんが、ほとんどのレイアウトは空間を均等に共有して画面に合わせて拡大する列を望みます。それが**fr単位**の用途です。1つの fr は余った空間の1シェアを意味するため、それぞれ 1fr の3列はコンテナの3分の1を占めます。

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 3つの同じサイズの列 */
}

3回 1fr と入力することは面倒なため、repeat() がそれを書きます。gap はトラック間の空間を設定するため、すべてのアイテムでマージンを使う必要がありません。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 同じ3つの同じサイズの列 */
  gap: 16px;                               /* 行と列の間の空間 */
}

fr ユニットは固定サイズとギャップを差し引いた後、コンテナ内の自由空間のシェアを測定します。それぞれ 1fr の3列は同じ3分の1を取得し、2fr 1fr のペアは空間を2対1で分割します。fr は残りを分割するため、列はコンテナが拡大または縮小しても比例したままであり、固定長ではできません。

2つのヘルパーはトラックリストを読みやすくします。repeat(3, 1fr) は 1fr 1fr 1fr に展開され、gap は1つのプロパティでガターを設定します（異なる場合は row-gap と column-gap）。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3つの同じサイズの列 */
  gap: 16px;                               /* 16pxのガター、行と列 */
}

ガターはアイテムのマージンではなく gap で設定されます。gap はトラック間にのみ適用され、外側の端には適用されないため、グリッドはコンテナに対してフラッシュに座りながらアイテムは均等に配置されます。

fr ユニットは**柔軟な長さ**です。コンテナの自由空間（固定トラックサイズ、コンテンツサイズのトラック、ギャップが解決された後に残るスペース）の割合を表します。2fr 1fr 1fr トラックリストは最初の列に自由空間の半分を与え、他の2つに4分の1ずつ与えます。微妙な点は fr が自由空間を配置し、総幅を配置しないため、広いコンテンツを保持するトラックは minmax() でキャップされない限り fr のシェアを超える可能性があります。次のセクションで登場します。

repeat() はトラックの実行を書く簡潔な方法です。repeat(3, 1fr) は 1fr 1fr 1fr であり、repeat(2, 200px 1fr) は4つのトラックを生成します。gap（grid-gap の最新名）はトラック間のガターのみを設定し、グリッドの外側には設定しないため、コンテナ自体のパディングと競合しません。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3つの同じサイズの列 */
  gap: 16px 24px;                          /* 16pxの行ギャップ、24pxの列ギャップ */
}

2値 gap に注目してください。行ギャップ優先、次に列ギャップ。単一の値は両方に適用されます。

Juno柔軟なトラック 1つの fr は余った空間の1シェアなため、1fr 1fr 1fr は3つの同じサイズの列を与えます。同じ値を何度も入力しないように repeat(3, 1fr) を使用し、トラック間の空間には gap を使用してください。fr がクリックしたら、決してうまく加算されなかったパーセンテージへの手を伸ばすことをやめました。

Juno柔軟なトラックfr はコンテナ内の自由空間を分割するため、比例する列はページがリサイズされても比例したままです。repeat() を活用してトラックリストを短く保ち、アイテムごとのマージンの代わりに gap をガターに使用してください。gap はトラック間にのみ座り、外側の端には座らないことを覚えておいてください。これは通常、正確に必要な方法です。

Juno柔軟なトラックfr は自由空間を分割し、総幅ではなく分割するため、広いコンテンツを持つトラックは minmax() でキャップされるまでそのシェアをオーバーフローする可能性があります。repeat() は構成されるため、repeat(2, 200px 1fr) は4つのトラックです。2値 gap は行ギャップ優先に読み取られ、次に列ギャップ。これは時計回りのショートハンドと一致すると仮定する人をトリップします。

アイテムの配置

デフォルトでは各アイテムは次の空いているセルに落ちます。1セルに1つ、順番に。アイテムが複数のセルを占める場合は、grid-column と grid-row で指定します。トラック間の線は 1 から始まる番号が付けられるため、grid-column: 1 / 3 は「列線1から列線3まで開始」を意味し、2列をカバーします。

.featured {
  grid-column: 1 / 3;   /* 列線1から列線3まで、2列幅 */
}

線を数えたくない場合は、span でアイテムが落ちた位置からカバーするセル数を指定します。

.featured {
  grid-column: span 2;   /* 2つの列をカバー、このアイテムが座る位置から始まる */
}

グリッド配置は**グリッド線**で記述されます。トラック間および周囲に座る番号付き線です。3列グリッドには4つの列線があり、1 から 4 までです。grid-column: 1 / 3 はアイテムを線1から線3に配置するため、最初の2列をスパンします。grid-row は垂直方向で同じ処理を行います。span キーワードは数数を避けます。grid-column: span 2 はアイテムが配置される位置から2列をカバーします。

ページ全体のレイアウトでは、線を数えるよりも領域に名前を付けることが読みやすくなります。grid-template-areas でレイアウトを名前付きセルのセットとして描画し、各アイテムに名前を割り当てることができます。

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";     /* サイドバーは名前を繰り返して両行をスパン */
}

.page > header { grid-area: header; }
.page > aside  { grid-area: sidebar; }
.page > main   { grid-area: main; }

配置は**グリッド線**上で実行されます。すべてのトラックの周囲に番号が付けられた境界です（nトラック軸はn + 1本の線を持ちます）。grid-column: 1 / 3 は開始と終了の列線を設定し、それらの間のトラックをスパンします。grid-column: span 2 はスタートをピン止めせずにスパンを設定し、自動配置アルゴリズムがどこに落ちるかを選択できるようにします。負の線番号は終了から数えるため、grid-column: 1 / -1 は列数に関係なく常に全幅をスパンします。これはフルブリードの行を書く耐久性のある方法です。

grid-template-areas は領域に名前を付けるため、線番号ではなく名前でアイテムを配置します。各文字列は行、各トークンはセル、トークンをセル間で繰り返すことで1つのアイテムがそれらをスパンします。ホワイトスペース形式のブロックはレイアウトの読みやすい図としても機能します。

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";     /* サイドバーは列1の両行を占める */
}

.page > aside { grid-area: sidebar; }

2つのルールがそれを保ちます。すべての行文字列は同じ数のセルを持つ必要があり、1つの名前のセルは実心矩形を形成するか、宣言は無効で無視されます。. トークンは意図的に空にしたいセルをマークします。

Junoアイテムの配置 アイテムはデフォルトで1つのセルを埋め、1つを grid-column または grid-row でセルをまたがせます。線番号は 1 から始まるため、grid-column: 1 / 3 は2列をカバーするか、数えたくない場合は span 2 を使用してください。これはほとんどのレイアウトを構築する前に、単一の領域に名前を付けることなく十分です。

Junoアイテムの配置 グリッド線でアイテムを配置します。grid-column: 1 / 3 は2列をスパンし、span 2 は固定の開始から数えずに実行します。ページ全体では、grid-template-areas で領域に名前を付けるとレイアウトが一目でわかり、手作業で行番号を追跡するより優れています。名前をセル間で繰り返し、その領域がそれらをスパンします。

Junoアイテムの配置 線は負の値になる可能性があるため、grid-column: 1 / -1 は列数に関係なく全幅をスパンします。これは信頼できるフルブリードのトリックです。grid-template-areas では、すべての行文字列は等しいセルが必要で、各名前付き領域は実心矩形である必要があります。そうでないと、宣言全体がドロップされます。意図的に空のセルにする場合は . トークンを使用してください。

メディアクエリなしでレスポンシブグリッド

カード行は広いスクリーンで3つ表示され、タブレットで2つ、携帯電話で1つ表示されるべきです。ブレークポイントを書くことなく、グリッドだけでそれを実行できます。トリックは1行です。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

内側から外側へ読みます。minmax(200px, 1fr) は各列が少なくとも 200px で最大で空間の1シェアであることを意味します。auto-fit はコンテナが収容するスペースがあるだけ多くのそれらの列に収めます。広いスクリーン、より多くの列が収まります。狭いスクリーン、より少なくなり、カードは自動的に再フローします。

メディアクエリなしでカードを再フローするパターンは repeat(auto-fit, minmax(200px, 1fr)) です。各ピースは1つのジョブを実行します。minmax(200px, 1fr) は 200px より小さくなったことがなく、1つの fr シェアより大きくないトラックを定義します。auto-fit はそのトラックを現在の幅に適合する回数だけ繰り返すため、列数は固定ブレークポイントではなくコンテナに応答します。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

200px フロアはあなたの実際のコントロールです。これはグリッドが列を落とす前にカードが取得できる最も狭い値です。これはレスポンシブデザインの流動的なテクニックと自然に組み合わされ、通常はカードグリッドのために書くメディアクエリを置き換えます。

repeat(auto-fit, minmax(200px, 1fr)) は標準的なレスポンシブグリッドイディオムであり、各部分がその場所を獲得します。minmax(min, max) は下限と上限を持つトラックを定義します。minmax(200px, 1fr) は 200px 以下に縮みず、1つの自由空間シェアを超えて拡大しません。200px フロアはリフローしきい値を設定します。グリッドが列を獲得または失う幅です。

auto-fit と auto-fill の間での選択は知る価値がある部分です。どちらも多くの minmax() トラックがコンテナに適合するかを計算します。auto-fill は空のトラックをグリッドに保ちます。カード行が半分空の場合、列幅にとどまります。auto-fit はこれらの空のトラックを幅ゼロに折りたたむため、存在するアイテムは行を埋めるために拡大します。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* アイテムは埋めるために拡大 */
  gap: 16px;
}

1つのエッジを見てください。minmax(200px, 1fr) は 200px プラスギャップより狭いコンテナをオーバーフローする可能性があります。フロアは難しい最小値だからです。minmax(min(200px, 100%), 1fr) はフロアが非常に小さいスクリーンでコンテナ幅に下がることを許可することによってこれを保護します。デバイス間でフロアを確実にサイズするには、サイズユニットが長さユニットがどのように解決するかをカバーしています。

Junoメディアクエリなしでレスポンシブグリッドrepeat(auto-fit, minmax(200px, 1fr)) はカードを自動的に再フローさせるため、ブレークポイントは不要です。各列は少なくとも 200px で最大で空間の1シェアであり、auto-fit は収まるだけ多くを詰めます。200px を変更し、カード側に座っている多くを変更します。

Junoメディアクエリなしでレスポンシブグリッド 1行、repeat(auto-fit, minmax(200px, 1fr))、カードグリッドメディアクエリのスタックを置き換えます。200px フロアはレバーです。グリッドが列を落とす前にカードがどのくらい狭くなるかを決定します。カードグリッドを反射させるために本当にブレークポイントを書く前にこれに手を伸ばしてください。

Junoメディアクエリなしでレスポンシブグリッドauto-fit は空のトラックを折りたたむため、存在するアイテムは埋めるために拡大します。auto-fill は空のトラックを保ちギャップを離れます。これがそれら間の全体の違いです。オーバーフローケースを見てください。難しい 200px フロアは非常に狭いコンテナ上でこぼれる可能性があるため、minmax(min(200px, 100%), 1fr) はより安全なフロアです。フロアはリフローポイントを設定するため、最小限の検知可能なカードを持って選択してください。

明示的グリッドと暗黙的グリッド

これまでのすべては**明示的グリッドを定義します。grid-template-columns と grid-template-rows で名前が付けられたトラック。アイテムが定義されたグリッドの外に落ちると、ブラウザはそれらを保持するトラックを作成し、それらが暗黙的グリッド**を形成します。3列の1行明示的グリッドに4番目のアイテムを追加すると、暗黙的に作成された2番目の行が開始されます。暗黙的なトラックはデフォルトで自分たちをサイズ設定します auto。これが暗黙的な行がそれ以外に指定しない限り、そのコンテンツと同じくらい高い理由です。

grid-auto-rows はそれらの暗黙的な行のサイズを設定します（grid-auto-columns は暗黙的な列）。そのため、行数を予測できないカードギャラリーでも均等な行が得られます。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 明示的：3列 */
  grid-auto-rows: 240px;                   /* 暗黙的な行は各240px */
  gap: 16px;
}

配置は、アイテムとトラックがセル内のどこに座るかを決定します。justify-items はアイテムを行（インライン）軸に沿って配置し、align-items は列（ブロック）軸に沿って配置します。各値は start、end、center、または stretch（デフォルト、セルを埋める）を受け入れます。place-items は両方のショートハンドであり、ブロック軸優先です。

.gallery {
  place-items: center;   /* align-itemsとjustify-items、両方中央 */
}

minmax() はコンテンツキーワード min-content と max-content も受け取ります。min-content はオーバーフローせずにトラックが取得できる最小値です（大体最長の壊れない単語）、max-content はコンテンツが何も強制的にラップされないときに望むサイズです。minmax(min-content, max-content) のようなトラックはそれらの境界内でコンテンツにサイズします。subgrid ネストされたグリッドが親のトラック線を継承できるため、子グリッドの列は外側のグリッドに並びます。その代わりに自分たちのものを定義するのではなく。

グリッド対フレックス決定では、クリーンなルールはこれです。1つの軸でコンテンツを配置し、それを副作用としてラップしている場合は、flexboxを使用してください。ナビゲーションバー、タグの行、ツールバー。行と列にコンテンツを配置しており、両軸で配置する必要がある場合は、グリッドを使用してください。ページシェル、カードギャラリー、配置されたラベルとフィールドを持つフォーム。彼らはうまく構成されます。そのため、グリッドセルはしばしばフレックスコンテナを保持し、その組み合わせはあなたが構築するほとんどのレイアウトをカバーします。

Juno明示的グリッドと暗黙的グリッド 宣言するトラックは明示的グリッドです。オーバーフローするアイテムを保持するためにブラウザが追加するものは暗黙的グリッド、これらの余分なトラックは grid-auto-rows または grid-auto-columns がそれ以外に指定されるまで auto サイズです。配置は justify-items と align-items に住んでおり、place-items はショートハンドであり、stretch はデフォルトです。決定は1つの軸とラップはflexboxを意味し、2つの軸は並ぶ必要があります。グリッドを意味し、彼らは幸せに巣を作ります。