grid（2方向レイアウトの基本）とは
gridは、行と列の両方を同時に扱える2次元レイアウトの仕組みです。
画面をマス目で区切るようにレイアウトを定義でき、要素の配置や構造を明確に設計できます。
flexが並び方のルールを扱うのに対し、gridは領域そのものを扱う点が特徴です。
gridの基本構造
gridレイアウトを有効にするためのプロパティです。
指定した要素はグリッドコンテナとなり、子要素を行と列で構成された2次元レイアウトとして扱えるようになります。
構文
セレクタ{
display:grid;
}
display:gridを指定すると、その要素はグリッドコンテナになります。
直下の子要素はグリッドアイテムとなり、行と列を基準に配置されます。
この指定だけでは列や行の数は定義されず、レイアウトの枠組みを作るための準備段階となります。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
</div>div{
display: grid;
}出力例
要素1
要素2
要素3
要素4
gridはflexと異なり、指定しただけでは見た目に変化は起こりません。
行と列を定義して初めてレイアウトとして機能します。
grid-template-columns
グリッドレイアウトの列構造を定義するプロパティです。
横方向をいくつの列に分けるか、その幅をどのように配分するかを指定します。
構文
セレクタ{
grid-template-columns:値;
}
grid-template-columnsは列の数と幅を左から順に指定します。
値を複数並べることで、その数だけ列が作成されます。
pxや%などの固定値だけでなく、frを使って残りのスペースを比率で分配することもできます。
gridはここで初めて列という概念を持ち、レイアウトとして機能し始めます。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
</div>
<div class="fr">
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
</div>div {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
background: #eeeeee;
}
.fr {
display: grid;
grid-template-columns: 1fr 2fr;
}
p {
border: 1px solid #000000;
box-sizing: border-box;
}出力例
要素1
要素2
要素3
要素4
要素1
要素2
要素3
要素4
上のコンテナは4つ1frを指定したため、4つの列が均等な幅で作成され、子要素は左から順に配置されます。
下のコンテナは2つ1fr・2frを指定したため、2列で作成され、1:2の幅で配置されます。
frは残りのスペースを分配する単位で、画面サイズが変わっても柔軟に列幅が調整されます。
grid-template-columnsに指定する数によって、列構造を明示的に定義できる点がgridの大きな特徴です。
grid-template-rows
グリッドレイアウトの行構造を定義するプロパティです。
縦方向をいくつの行に分けるか、その高さをどのように配分するかを指定します。
構文
セレクタ{
grid-template-rows:値;
}
grid-template-rowsは行の数と高さを上から順に指定します。
値の指定方法はgrid-template-columnsと同様で、固定値やfrを組み合わせて柔軟な行構造を作成できます。
行と列を組み合わせることで、マス目状の2次元レイアウトを完成させられます。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
</div>div {
display: grid;
grid-template-rows: 50px 1fr 50px;
}
p {
border: 1px solid #000000;
box-sizing: border-box;
}出力例
要素1
要素2
要素3
1行目と3行目は固定高さ、中央の行は残りのスペースを占めます。
grid-template-rowsを使うことで、ヘッダー・メイン・フッターのような縦構造を明確に定義できます。
gridでは行と列の両方を明示的に指定できるため、レイアウト全体を設計図のように組み立てられます。
gap
グリッドレイアウトにおける行と列の間隔をまとめて指定するプロパティです。
マス同士の余白を一括で管理でき、レイアウト構造を崩さずに間隔を調整できます。
構文
セレクタ{
gap:値;
}
gapはグリッドの行間と列間の余白を指定します。
1つの値を指定すると行と列の両方に適用され、2つの値を指定すると1つ目が行方向、2つ目が列方向に適用されます。
grid-templateで定義した行や列のサイズには影響せず、要素同士の間隔だけを調整できます。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
</div>div{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
p {
border: 1px solid #000000;
box-sizing: border-box;
}出力例
要素1
要素2
要素3
各列の間に10pxの余白が均等に作られます。
marginと違い、外側には影響せず、行と列の間隔だけを安全に調整できます。
gridでは構造を保ったまま余白を設計できるため、gapは基本となるプロパティの一つです。
gridで2次元レイアウトを扱う
gridは、行と列を同時に扱える2次元レイアウトの仕組みです。
これまでの指定は一方向ずつだったので、「flexと何が違うの？」と疑問に思ったかもしれません。
しかし、紹介したcolumnsとrowsを組み合わせることで、要素をマス目状に配置できます。
ここがflexとの決定的な違いです。
構文
セレクタ{
display:grid;
grid-template-columns:値;
grid-template-rows:値;
}
display:gridを指定しただけでは見た目に変化は起こらないことは周知の通りです。
gridでは、横方向をgrid-template-columns、縦方向をgrid-template-rowsで定義して初めて2次元レイアウトが成立します。
行と列を同時に指定することで、配置の基準となるマス目が作られます。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
<p>要素5</p>
<p>要素6</p>
</div>div{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
gap: 10px;
}
p {
border: 1px solid #000000;
box-sizing: border-box;
height: 50px;
}出力例
要素1
要素2
要素3
要素4
要素5
要素6
横に3列、縦に2行のグリッドが作られ、要素はマス目に沿って自動的に配置されます。
行と列の両方を同時に設計できるため、画面全体の構造を把握しやすく、意図したレイアウトを崩さずに構築できます。
これがgridが2次元レイアウトと呼ばれる理由です。
なお、gapや%のように空間を前提とした指定では、高さに余白がないと効果が見えにくくなるため、意図した余白が確保できない場合はheightの指定を確認しましょう。
repeat
repeatは、grid-template-columnsやgrid-template-rowsで同じ指定を繰り返す際に使う値です。
列や行の定義を簡潔にまとめられ、2次元レイアウトの構造を把握しやすくなります。
構文
セレクタ{
grid-template-columns:repeat(回数, 値);
grid-template-rows:repeat(回数, 値);
}
repeatは、同じサイズ指定を指定した回数分だけ繰り返します。
1つ目の値には繰り返す回数を、2つ目の値には列や行のサイズを指定します。
プロパティにgrid-template-columnsを指定すると列、grid-template-rowsを指定すると行の繰り返しになります。
通常の指定と挙動は同じで、記述量だけを減らせる点が特徴です。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
<p>要素5</p>
<p>要素6</p>
<p>要素7</p>
<p>要素8</p>
</div>div{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 50px);
gap: 10px;
}
p {
border: 1px solid #000000;
height: 50px;
box-sizing: border-box;
}出力例
要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8
横に3列、縦に3行のグリッドが作られ、要素はマス目に沿って自動的に配置されます。
repeatを使うことで、同じ指定を何度も書かずに済み、グリッドの構造を一目で把握できます。
列と行の両方に使えるため、2次元レイアウトを効率よく設計できます。
出力例のように端数でも1つ空いた状態で表示できますが、行や列を増減した際は回数の変更漏れに気をつける必要があります。
また、repeatは、同じ幅や高さを持つ列や行を作る場合に特に有効で、値の組み合わせによっては、固定幅と可変幅を混在させたレイアウトも表現できます。
grid-column
grid-columnは、要素を複数の列にまたがって配置するためのプロパティです。
グリッドで作ったマス目をまとめて1つの領域として扱えるようになり、レイアウトに強弱をつけられます。
構文
セレクタ{
grid-column:開始位置 / 終了位置;
}
grid-columnは、要素が配置される列の開始位置と終了位置を指定します。
スラッシュで区切って記述し、開始位置から終了位置の直前までの列を占有します。
列番号は左から1始まりで数えられます。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
<p>要素5</p>
<p>要素6</p>
<p>要素7</p>
<p>要素8</p>
</div>div{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 50px);
gap: 10px;
}
p:first-child {
grid-column: 1 / 3;
border: 1px solid #000000;
height: 50px;
box-sizing: border-box;
}出力例
要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8
最初の要素が1列目から2列目までを横断して配置されます。
grid-columnを使うことで、特定の要素だけを強調したり、レイアウト上のまとまりを作ったりできます。
グリッド全体の構造を保ったまま、部分的な配置を調整できる点が特徴です。
grid-columnは、レイアウトを崩すための指定ではなく、あらかじめ用意したマス目を組み合わせて使うための指定です。
repeatと組み合わせることで、規則的な構造を保ちながら柔軟な配置が可能になります。
grid-row
grid-rowは、要素を複数の行にまたがって配置するためのプロパティです。
縦方向にマス目をまとめて扱えるようになり、グリッドレイアウトに高さの変化やまとまりを持たせられます。
構文
セレクタ{
grid-row:開始位置 / 終了位置;
}
grid-rowは、要素が配置される行の開始位置と終了位置を指定します。
スラッシュで区切って記述し、開始位置から終了位置の直前までの行を占有します。
行番号は上から1始まりで数えられます。
コード例
<div>
<p>要素1</p>
<p>要素2</p>
<p>要素3</p>
<p>要素4</p>
<p>要素5</p>
<p>要素6</p>
<p>要素7</p>
<p>要素8</p>
</div>div{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 50px);
gap: 10px;
}
p:first-child {
grid-row: 1 / 3;
border: 1px solid #000000;
height: 50px;
box-sizing: border-box;
}出力例
要素1
要素2
要素3
要素4
要素5
要素6
要素7
要素8
最初の要素が1行目から2行目までを縦方向にまたがって配置されます。
grid-rowを使うことで、縦方向に大きな領域を持つ要素を作れ、見出しや強調ブロックなどを自然に配置できます。
grid-columnと組み合わせることで、2次元レイアウトの自由度が大きく広がります。