CSSグリッドでの配置、スパン、密度

序章

CSSグリッドで学ぶ最も一般的なことは、通常、グリッドアイテムではなく、グリッドコンテナに関連しています。基本的なレイアウト構造には、グリッドコンテナに適用される一般的なグリッド定義で十分です。ただし、グリッドの内容をさらに制御する必要がある場合は、グリッドコンテナの使用が制限されます。

たとえば、4 x 2グリッドが必要な場合がありますが、最初のグリッドアイテムは、行1と2だけでなく、列1と2も占める必要があります。または、グリッド列トラックの実行時の総数がわからないときに、アイテムを最後のグリッド列トラックまでスパンしたい場合があります。

各グリッドアイテムのサイズは事前定義されており、グリッドコンテナ内の他のアイテムと比較してサイズを変更する方法を見つける必要があります。

このチュートリアルでは、CSSグリッドでの配置、スパン、密度について説明します。

グリッドアイテムの配置：ここから開始、そこで終了

ブラウザのすべてにデフォルトのスタイルがあります。たとえば、0やautoなどです。カスタム値を調整する前に知っておく必要のある他のデフォルトもあります。グリッドがある場合、グリッドアイテムには、grid-[x]-startおよびgrid-[x]-endで定義された配置値があります（xはcolumnまたはrowになります）。）。値はautoです。

グリッドレイアウトを見ると、フローがどのように対称に見えても、そのグリッド内の各アイテムに配置値があることを覚えておくと役立ちます。

    .container {
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(5, 1fr)
    }

    .item {
      grid-column-start: auto; /_ default _/
      grid-column-end: auto; /_ default _/
      grid-row-start: auto; /_ default _/
      grid-row-end: auto; /_ default _/
    }

列の配置

列から始めて、これらのデフォルト値を調整してみましょう。

    .item:nth-child(1) {
      grid-column-start: 1;
      grid-column-end: 5;
    }

グリッドの最初のアイテムが必要です.item:nth-child(1)
line 1から始めるには、grid-column-start: 1;
そして、 line 5、grid-column-end: 5;で終了します

完全なコードはこちらをご覧ください。

行の配置

同じルールが行配置に適用されます。

    .item:nth-child(22) {
      grid-row-start: 1;
      grid-row-end: 4;
    }

ただし、grid-row-[x]は、グリッドアイテムのデフォルトの配置をリセットして、列の行1と行の行1から開始し、配置のスパンが発生します。

このコードで、22行がその場所を離れ、1行に移動してからスパンしていることがわかります。

元の列トラックのままにしておきたい場合は、次のように明示的に指定する必要があります。

    .item:nth-child(20) {
      grid-column-start: 3;
      grid-row-start: 5;
      grid-row-end: 10;
    }

startまたはendのみを指定できます。配置プロパティをペアで指定する必要はありません。 1つだけ指定すると、残りはauto（デフォルト）のままになります。注意が必要なのは、grid-[x]-startの値のみを変更すると、グリッドアイテムがトラックではなく行から始まることです。

    .item:nth-child(1) {
      grid-column-start: 5;
    }

一方、endのみを指定した場合は、指定した終了値から開始し、逆にグリッドにまたがります。たとえば、アイテム10に3で終了するように指示すると、アイテムは最も近い次の行2から始まり、行3に描画されます。

    .item:nth-child(10) {
      grid-column-end: 3;
    }

ここですべてのコードを見ることができます。

grid-[x]-startおよびgrid-[x]-endの省略構文もあり、-startおよび-endコードを廃止できます。

    .item {
      grid-column: [start] / [end];
      grid-row: [start] / [end];
    }

これまでに作成したコードサンプルを置き換えることができるいくつかの例を次に示します。

    .item {
      grid-column: 1 / 5; /__ Line 1 to 5 /
      grid-row: 1 / 4; /*_ Line 1 to 4 __/
      grid-column: 5 / auto; / Line 5 to 6 *_/
      grid-column: auto / 3; /_ Line 2 to 3 _/
    }

スパニング：ここで開始/終了、nを取る

プレースメントが占めるトラックの数を表すために「スパン」という言葉を使用してきました。行1から5と言うとき、グリッドアイテムは1から5にまたがる必要があると言っています。私は通常、これを暗黙のスパニングと呼びます。

値として機能するspanキーワードがあります。これを使用すると、明示的なスパニングと呼ぶことができます。配置とスパニングは十分に柔軟性があるため、単一のプロパティの値として暗黙的および明示的なスパニングの両方を使用できます。

スパン列

まず、アイテムを列トラック全体にまたがる方法を見てみましょう。

    .item:nth-child(1) {
      grid-column: span 5;
    }

これは、私たちが書いた最初の例の代替です。

    .item:nth-child(1) {
      grid-column: 1 / 5;
    }

ただし、追加の詳細を含めることができます。

    .item:nth-child(1) {
      grid-column: span 2 / 5;
    }

ここで5で終了し、スパン2は後方に追跡します。

もう一つの例：

    .item:nth-child(1) {
      grid-column: 2 / span 2;
    }

ここでは、列行2で開始し、列行4で終了します（2ジャンプ後）。

スパン行

このチュートリアルで行についてこれまでに学んだことはすべて、例外なく適用されます。

    .item:nth-child(1) {
      grid-column: 2 / span 2;
      /_ highlight line_/
      grid-row: span 5
    }

まだ初めてスパンしていますが、その後は行軸にスパンしています。ブラウザはボックスを描画して5トラックを占有します。

過剰な配置とスパニング

5列を持つようにグリッドを明示的に定義したことを思い出してください。次のように、列6からアイテムをスパンまたは配置できます。

    .item:nth-child(1) {
      grid-column: span 10; /_ 1 _/
      grid-column: 1 / 10; /_ 2 _/
      grid-column: 7 / 10; /_ 3 _/
      grid-column: 1 / span 10; /_ 4 _/
    }

それらに対応するために、暗黙のトラックが作成されます。

値としての負の整数

負の整数は正の整数と同じくらい便利です—配置またはスパンを逆にします。したがって、最初の列または行から開始する代わりに、配置またはスパンは最後の列または行から開始されます。

これらのコードスニペットは正反対です。

    .item:nth-child(1) {
      grid-column: 1 / 5
    }

    .item:nth-child(1) {
      grid-column: -1 / -5
    }

前述のように最後から後ろ向きに描画しているので、1列にアイテム2の余地があり、押し下げられます。そのような場合に作成されたこれらのスペースを埋めるために密度を使用することを検討します（コンテンツが対称でない場合）。

グリッドコンテナによって定義されている列の数を知らなくても、列または行の最後までスパンできる方法があります。これは、動的グリッドの定義でauto-fillまたはauto-fitを使用している場合に役立ちます。

    .item:nth-child(1) {
      grid-column: 1 / -1
    }

行の終わりまたは列の終わりに-1を指定すると、グリッドアイテムは、指定した開始点（この場合は1行目）からグリッドの終わりまでスパンされます。

ただし、これは暗黙のグリッドでは機能しません。したがって、グリッドコンテナで列と行のみを定義したため、これは何もしません。

    .item:nth-child(1) {
      grid-row: 1 / -1;
    }

それが機能するためには、グリッドコンテナに明示的な行定義を与える必要があります。例えば：

    .container {
      grid-template-rows: repeat(10, 30px);
    }

密度

前の例では、グリッドの中央に空のスペースが散在する原因となる配置またはスパンを確認しました。

グリッドコンテナのgrid-auto-flowプロパティを使用してこれらのスペースを閉じ、これらの空白を閉じることができます。

    .container {
      grid-auto-flow: dense;
    }

注意する必要があるのは、順序に従う必要のある対称コンテンツがある場合、フローを密にすることでその順序が歪むことです。これは、グリッドアイテムを不規則に配置しながら、コンパクトなデザインが必要な場合に行う必要のあるトレードオフです。

アイテム1を最後に配置した後、グリッドが戻ってトラックの先頭に2を配置し続けることに注目してください。

結論

このチュートリアルでは、CSSグリッド（配置、スパン、密度）について説明しました。