gridの解説 - CSSさんぷるず

CSSのdisplayのgridの説明です。

display:grid 基本

display:grid;で囲むだけです。
<div style="display:grid;">
  <div>あ</div><div style="background-color:moccasin;">い</div><div>う</div>
</div>

grid-template-columns 横の列数を決める

grid-template-columnsを使います。
grid-template-columnsで50%を二つ並べたので1行に2列です。それ以上は次の行になります。
「あ」、「い」が1行目。「う」が2行目になっています。
<div style="display:gridgrid-template-columns:50% 50%">
  <div>あ</div><div style="background-color:moccasin;">い</div><div>う</div>
</div>

grid-template-rows 縦の列数を決める

grid-template-rowsで50px 25px 50pxと3行設定しました。真ん中の「い」だけが高さが短いです。
<div style="display:gridgrid-template-rows:50px 25px 50px;">
  <div>あ</div><div style="background-color:moccasin;">い</div><div>う</div>
</div>

fr

gridにはfrという新しい単位が出来ました。
frの合計値を100%としてそれぞれの数値に分けます。
1fr 1frは50% 50%と同じ意味になります。
1fr+1fr=2fr。全体を2等分して全体の2分の1と全体の2分の1
あ50%
い50%
う50%
あ1fr
い1fr
う1fr
<div style="display:gridgrid-template-columns:50% 50%">
  <div>あ50%</div><div style="background-color:moccasin;">い50%</div><div>う50%</div>
</div>
<div style="display:gridgrid-template-columns:1fr 1fr">
  <div>あ1fr</div><div style="background-color:moccasin;">い1fr</div><div>う1fr</div>
</div>
1fr 2fr 1frは25% 50% 25%と同じ意味になります。
1fr+2fr+1fr=4fr。全体を4等分して全体の4分の1と全体の4分の2と全体の4分の1
あ25%
い50%
う25%
あ1fr
い2fr
う1fr
<div style="display:gridgrid-template-columns:25% 50% 25%">
  <div>あ25%</div><div style="background-color:moccasin;">い50%</div><div>う25%</div>
</div>
<div style="display:gridgrid-template-columns:1fr 2fr 1fr">
  <div>あ1fr</div><div style="background-color:moccasin;">い2fr</div><div>う1fr</div>
</div>
2fr 2fr 1frは40% 40% 20%と同じ意味になります。
2fr+2fr+1fr=5fr。全体を5等分して全体の5分の2と全体の5分の2と全体の5分の1
あ40%
い40%
う20%
あ2fr
い2fr
う1fr
<div style="display:gridgrid-template-columns:40% 40% 20%">
  <div>あ40%</div><div style="background-color:moccasin;">い40%</div><div>う20%</div>
</div>
<div style="display:gridgrid-template-columns:2fr 2fr 1fr">
  <div>あ2fr</div><div style="background-color:moccasin;">い2fr</div><div>う1fr</div>
</div>

repeat

repeatで繰り返し表記ができます。
下の3つの例は全部同じ意味です。
あ25%
い25%
う25%
え25%
あ25%
い25%
う25%
え25%
あ1fr
い1fr
う1fr
え1fr
<div style="display:gridgrid-template-columns:25% 25% 25% 25%;">
  <div>あ25%</div><div style="background-color:moccasin;">い25%</div><div>う25%</div><div style="background-color:moccasin;">え25%</div>
</div>
<div style="display:gridgrid-template-columns:repeat(4, 25%);">
  <div>あ25%</div><div style="background-color:moccasin;">い25%</div><div>う25%</div><div style="background-color:moccasin;">え25%</div>
</div>
<div style="display:gridgrid-template-columns:repeat(4, 1fr);">
  <div>あ1fr</div><div style="background-color:moccasin;">い1fr</div><div>う1fr</div><div style="background-color:moccasin;">え1fr</div>
</div>
repeatは単一でなくても構いません。組み合わせたものを繰り返すことができます。
20%と30%を一組として2回繰り返します。
repeat(繰り返す回数, 繰り返す一組を半角スペース区切り)という記述です。repeat(2, 20% 30%)
下の3つの例は全部同じ意味です。
あ20%
い30%
う20%
え30%
あ20%
い30%
う20%
え30%
あ2fr
い3fr
う2fr
え3fr
<div style="display:gridgrid-template-columns:20% 30% 20% 30%;">
  <div>あ20%</div><div style="background-color:moccasin;">い30%</div><div>う20%</div><div style="background-color:moccasin;">え30%</div>
</div>
<div style="display:gridgrid-template-columns:repeat(2, 20% 30%);">
  <div>あ20%</div><div style="background-color:moccasin;">い30%</div><div>う20%</div><div style="background-color:moccasin;">え30%</div>
</div>
<div style="display:gridgrid-template-columns:repeat(2, 2fr 3fr);">
  <div>あ20%</div><div style="background-color:moccasin;">い30%</div><div>う20%</div><div style="background-color:moccasin;">え30%</div>
</div>

grid-auto-rows

grid-auto-rowsは明示的に指定していない行の高さを指定します。
下のサンプルでは最初の行しか高さを指定していません。
最初の「あいう」の「いう」は自動で内部で自動で高さが決められて表示されています。
二つ目の「あいう」の「いう」はgrid-auto-rowsで30pxの高さを指定したのでそれが適用されています。
<div style="display:gridgrid-template-rows:40px;">
  <div>あ</div><div style="background-color:moccasin;">い</div><div>う</div>
</div>
<div style="display:gridgrid-template-rows:40px; grid-auto-rows:30px;">
  <div>あ</div><div style="background-color:moccasin;">い</div><div>う</div>
</div>

grid-auto-columns

省略

minmax

minmaxで最低値と最大値を設定できます。
minを30pxに設定すると最低でも30pxが保障されます。最大をautoにしていると内容が増えると自動で高さが増えます。
maxをauto以外の数値にするとそちらの数値が優先されます。そして内容がそれ以上の量になってもmax以上の高さにならずオーバーフローします。
minmaxはgrid-template-columns、grid-template-rows、grid-auto-columns、grid-auto-rowsで使用することができます。
あminmax(30px, auto)
あminmax(30px, auto)
う1行目(自動で高さが増える。)
う2行目
う3行目
う4行目
う5行目
あminmax(30px, 50px)
う1行目
う2行目
う3行目
う4行目
う5行目
<div style="display:gridgrid-auto-rowsminmax(30px, auto); border:1px solid #000;">
  <div>あminmax(30px, auto)</div><div style="background-color:moccasin;">い</div><div>う</div>
</div>
<div style="display:gridgrid-auto-rowsminmax(30px, auto); border:1px solid #000;">
  <div>あminmax(30px, auto)</div><div style="background-color:moccasin;">い</div><div style="background-color:pink;"><div>う1行目(自動で高さが増える。)</div><div>う2行目</div><div>う3行目</div><div>う4行目</div><div>う5行目</div></div>
</div>
<div style="display:gridgrid-auto-rowsminmax(30px, 50px); border:1px solid #000;">
  <div>あminmax(30px, 50px)</div><div style="background-color:moccasin;">い</div><div style="background-color:pink;"><div>う1行目</div><div>う2行目</div><div>う3行目</div><div>う4行目</div><div>う5行目</div></div>
</div>

grid-column-start、grid-column-end、grid-row-start、grid-row-end、grid-column、grid-row

最初と最後の位置を指定することによりエクセルのセル結合のような表示ができます。
下の表は左上の点を起点として1,1右下の点を終点として6,4となります。
この数字はグリッド自体ではなくグリッド同士の間にある線の位置になります。
たとえば「く(3,2)-(4,3)」は左から3番目の線と上から2番目の線が交わる位置から、左から4番目の線と上から3番目の線が交わる位置までが「く」のグリッドの範囲となります。
grid-column-startが3
grid-row-startが2
grid-column-endが4
grid-row-endが3となります。
(grid-column-start, grid-row-start) - (grid-column-end, grid-row-end)
あ(1,1)-(2,2)
い(2,1)-(3,2)
う(3,1)-(4,2)
え(4,1)-(5,2)
お(5,1)-(6,2)
か(1,2)-(2,3)
き(2,2)-(3,3)
く(3,2)-(4,3)
け(4,2)-(5,3)
こ(5,2)-(6,3)
さ(1,3)-(2,4)
し(2,3)-(3,4)
す(3,3)-(4,4)
せ(4,3)-(5,4)
そ(5,3)-(6,4)
試しに「い」を横二つ分、「く」を縦二つ分にしてみます。五十音順が崩れないように重なる部分の「う」と「す」は削除しました。
「い(2,1)-(3,2)」を右に一つ伸ばし横の終わりを+1する「い(2,1)-(4,2)」に、つまり「grid-column-start:2; grid-row-start:1; grid-column-end:4; grid-row-end:2;」
「く(3,2)-(4,3)」をしたに一つ伸ばし縦の終わりを+1する「く(3,2)-(4,4)」に、つまり「grid-column-start:3; grid-row-start:2; grid-column-end:4; grid-row-end:4;」
い(横2つ分の1)、い(横2つ分の2)
く(縦2つ分の1)
く(縦2つ分の2)
<div style="display:gridgrid-template-columnsrepeat(5, 1fr);">
  <div>あ</div>
  <div style="background-color:moccasin; grid-column-start:2; grid-row-start:1; grid-column-end:4; grid-row-end:2;">い(横2つ分の1)、い(横2つ分の2)</div>
  <!--う-->
  <div style="background-color:moccasin;">え</div>
  <div>お</div>
  <div style="background-color:moccasin;">か</div>
  <div>き</div>
  <div style="background-color:moccasin; grid-column-start:3;grid-row-start:2;  grid-column-end:4; grid-row-end:4;">く(縦2つ分の1)<br />く(縦2つ分の2)</div>
  <div>け</div>
  <div style="background-color:moccasin;">こ</div>
  <div>さ</div>
  <div style="background-color:moccasin;">し</div>
  <!--す-->
  <div style="background-color:moccasin;">せ</div>
  <div>そ</div>
</div>

grid-column、grid-row

grid-columnやgrid-rowで省略した書き方ができます。
スラッシュで区切りstart / end というふうに記述してグリッドを指定できます。
「い(2,1)-(3,2)」を「grid-column-start:2; grid-column-end:4;」、そして省略して「grid-column:2 / 4」
「く(3,2)-(4,3)」を「grid-column-start:3; grid-column-end:4; grid-row-start:2; grid-row-end:4;」、そして省略して「grid-column:3 / 4; grid-row 2 / 4;」
い(横2つ分の1)、い(横2つ分の2)
く(縦2つ分の1)
く(縦2つ分の2)
<div style="display:gridgrid-template-columnsrepeat(5, 1fr);">
  <div>あ</div>
  <div style="background-color:moccasin; grid-column:2 / 4">い(横2つ分の1)、い(横2つ分の2)</div>
  <!--う-->
  <div style="background-color:moccasin;">え</div>
  <div>お</div>
  <div style="background-color:moccasin;">か</div>
  <div>き</div>
  <div style="background-color:moccasin; grid-column:3 / 4; grid-row: 2 / 4;">く(縦2つ分の1)<br />く(縦2つ分の2)</div>
  <div>け</div>
  <div style="background-color:moccasin;">こ</div>
  <div>さ</div>
  <div style="background-color:moccasin;">し</div>
  <!--す-->
  <div style="background-color:moccasin;">せ</div>
  <div>そ</div>
</div>

gap、column-gap、row-gap

グリッドの間隔を指定できます。
横のギャップはcolumn-gapで指定します。
縦のギャップはcolumn-gapで指定します。
縦横両方のギャップはgapで指定します。
前はgrid-column-gap, grid-row-gap, grid-gapという名称でした。grid-column-gap, grid-row-gap, grid-gapでも動きますが新し名称を使っていった方が無難でしょう。
あcolumn-gap:10px
あrow-gap:10px
あgap:10px
<div style="display:gridgrid-template-columns: 50% 50%; column-gap:10px; border:1px solid #000;">
  <div style="background-color:pink;">あcolumn-gap:10px</div>
  <div style="background-color:moccasin;">い</div>
  <div style="background-color:pink;">う</div>
  <div style="background-color:moccasin;">え</div>
</div>
<div style="display:gridgrid-template-columns: 50% 50%; row-gap:10px; border:1px solid #000;">
  <div style="background-color:pink;">あrow-gap:10px</div>
  <div style="background-color:moccasin;">い</div>
  <div style="background-color:pink;">う</div>
  <div style="background-color:moccasin;">え</div>
</div>
<div style="display:gridgrid-template-columns: 50% 50%; gap:10px; border:1px solid #000;">
  <div style="background-color:pink;">あgap:10px</div>
  <div style="background-color:moccasin;">い</div>
  <div style="background-color:pink;">う</div>
  <div style="background-color:moccasin;">え</div>
</div>

z-index

もしグリッドを重複するかたちで指定した場合は後の方のグリッドが上に表示されます。
あ(1,1)-(2,4)
お(1,2)-(3,3)
<div style="display:gridgrid-template-columns: 1fr 1fr 1fr;border:1px solid #000;grid-auto-rows: 100px;">
  <div style="background-color:aquamarine; border:1px solid blue;grid-column:1 / 2; grid-row: 1 / 4;">あ(1,1)-(2,4)</div>
  <div style="background-color:moccasin;">い</div>
  <div style="background-color:pink;">う</div>
  <!--え-->
  <div style="background-color:pink; border:1px solid red;grid-column:1 / 3; grid-row: 2 / 3;">お(1,2)-(3,3)</div>
  <div style="background-color:moccasin;">か</div>
  <!--き-->
  <div style="background-color:moccasin;">く</div>
  <div style="background-color:pink;">け</div>
</div>
先のグリッドを上に表示したい場合はz-indexを使用します。
あ(1,1)-(2,4) z-index:1;
お(1,2)-(3,3)
<div style="display:gridgrid-template-columns: 1fr 1fr 1fr;border:1px solid #000;">
  <div style="background-color:aquamarine; border:1px solid blue;grid-column:1 / 2; grid-row: 1 / 4; z-index:1;">あ(1,1)-(2,4) z-index:1;</div>
  <div style="background-color:moccasin;">い</div>
  <div style="background-color:pink;">う</div>
  <!--え-->
  <div style="background-color:pink; border:1px solid red;grid-column:1 / 3; grid-row: 2 / 3;">お(1,2)-(3,3)</div>
  <div style="background-color:moccasin;">か</div>
  <!--き-->
  <div style="background-color:moccasin;">く</div>
  <div style="background-color:pink;">け</div>
</div>

外部リンク

グリッドレイアウトの基本概念 MDN Web Docs (https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
戻る

全体目次