開発者ドキュメント

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

序章

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

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

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

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

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

たとえば、ブラウザのすべてにデフォルトのスタイルがあります。 0 また auto. カスタム値を調整する前に知っておく必要のある他のデフォルトもあります。 グリッドがある場合、グリッドアイテムの配置値は次のように定義されます。 grid-[x]-startgrid-[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(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]-startgrid-[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を取る

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

あります 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
    }

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

グリッドコンテナによって定義されている列の数を知らなくても、列または行の最後までスパンできる方法があります。 これは、動的グリッドの定義で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グリッド(配置、スパン、密度)について説明しました。

モバイルバージョンを終了