行を複数の列にまたがるようにする

CSS グリッドの行は、適切なグリッド プロパティを使用して複数の列を含むように構成できます。これを実現する方法は次のとおりです:

ラインベースの配置:

最も一般的なアプローチは、列の開始行と終了行を指定する行ベースの配置です:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

明示的なグリッド領域:

占有セルを明示的に定義するグリッド領域プロパティを使用します:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

負の値:

grid-column または Grid-column-start の負の値は、右に使用できます。左への配置:

grid-column: -2 / -1;  // Spans the last 2 columns

列行クランプ:

この手法では行クランプを使用して、行の終点を利用可能なスペースまで拡張します:

grid-column: auto;
grid-column-end: 100%;

最小値での自動サイズ設定:

最小幅での自動サイズ設定により、行が少なくとも指定された数を占めるようになります。列:

grid-column: auto;
min-width: 400px;

例:

ナビゲーション行をすべての列に拡大するには:

  

    ...
  
  ...

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

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

これらの方法のいずれかを適用すると、CSS グリッド内の複数の列にわたって行または列を拡張し、複雑で柔軟なレイアウトを作成できます。