グリッドの作成

grid-template-columns、gird-template-rows

grid-template-columns、gird-template-rowsでグリッドを作成していきます。
grid-template-columns: グリッドの横方向のサイズを指定
gird-template-rows：グリッドの縦方向のサイズを指定

HTML

<div class="grid">
  <div class="grid__item1"></div>
  <div class="grid__item2"></div>
  <div class="grid__item3"></div>
  <div class="grid__item4"></div></div>

pxでの指定

.grid {  
  display: grid;
  grid-template-columns: 500px 300px 200px;
  grid-template-rows: 300px 200px 100px;
}

frでの指定

frは全体を等分割した値
1fr 1fr 1fr：1/3ずつ

.grid {  
  display: grid;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height:600px;
}

2fr 1fr 1fr：最初のセルが全体の1/2になり、2,3番目のセルが残りの1/2を等分割した大きさになる （2/4, 1/4,1/4）

px,frを組み合わせた指定

600px 1fr 1fr　だと最初のセルに600pxが割り当てられ、残りのセルを2つに等分割する

.grid {
  display: grid;
  grid-template-columns: 600px 1fr 1fr;  
  grid-template-rows: 100px 1fr 1fr;
  height:600px;
}

repeat

repeatを使うことで短く記述できる
repeat(繰り返す数,サイズ指定)
構文
grid-template-columns: repeat(繰り返す数,数値);
grid-template-columns: 1fr 1fr 1fr;

.grid {  
  grid-template-columns: repeat(3, 1fr);
}

repeatは途中に入れたり、何回も記述できるので以下のような書き方もできる
grid-template-columns: 600px 1fr 1fr;

.grid {  
  grid-template-columns: 600px repeat(2, 1fr);
}

repeatを複数
grid-template-columns:1fr 1fr 1fr 2fr 2fr 2fr;

.grid {  
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

途中にrepeat\grid-template-columns:1fr 2fr 2fr 300px;

.grid {  
  grid-template-columns: 1fr repeat(2, 2fr) 300px;
}

グリッドアイテムの配置

grid-column,grid-row

grid-template-columns,gird-template-rowsでグリッドを作成できたのでグリッドアイテムを配置してみる(位置を指定しなくてもIE以外は左上から自動配置してくれます)

HTML

<div class="grid">
  <div class="grid__item1"></div>
  <div class="grid__item2"></div>
  <div class="grid__item3"></div>
  <div class="grid__item4"></div>
</div>

CSS

.grid {  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 600px;
}

位置の指定

grid-column,grid-rowを使って位置を指定していきます
この時に重要なのがグリッドラインです
グリッドには以下のようにgrid-columnのグリッドラインが左から1,2,3,4...、
grid-rowのグリッドラインが上から1,2,3,4となっています

grid-row、grid-columnは、開始のグリッドライン/終わりのグリッドラインで指定します。左から2番目、上から2番目のセルに指定するとしたら以下のように記述します。

.grid__item1 {  
  grid-column: 2/3;　//横のグリッドライン2〜3
  grid-row: 2/3; //縦のグリッドライン2〜3
}

1/2,2/3,3/4など終わりのグリッドラインに1つ隣のグリッドラインを指定する場合は省略して記述することもできます。

.grid__item1 { 
  grid-column: 2/3;　//横のグリッドライン2〜3
  grid-row: 2/3; //縦のグリッドライン2〜3
}
　　　↓
.grid__item1 {
  grid-column: 2; //開始のグリッドラインのみ指定 
  grid-row: 2; //開始のグリッドラインのみ指定
}

2つ以上のグリッドにまたがってグリッドアイテムを配置することもできます。
以下のように記述することで、左から２、3番目のセルにまたがって配置できます。

.grid__item1 {
  grid-column: 2/4;　//横のグリッドライン2〜4
  grid-row: 2/3;　//縦のグリッドライン2〜4
}

spanで指定

開始のグリッドラインのみ指定して、そこから何個さきのグリッドラインまで伸ばすかで指定することもできます
開始のグリッドライン/ span 何個先まで伸ばすか

grid-column: 2/4;の場合
2から2つ先の4まで伸ばすのでgrid-column: 2/ span 2;
grid-column: 1/5;の場合
1から4つ先の5まで伸ばすのでgrid-column: 1/ span 4;

.grid__item1 {
  grid-column: 2/4;
  grid-row: 2/3;
}
       ↓
.grid__item1 {
  grid-column: 2/ span 2; //2から2つ先の4まで伸ばす  
  grid-row: 2 / span 1;  //2から1つ先の3まで伸ばす
}

gap(grid-gap)

gapでグリッド間の余白を定義できます。
※当初はgrid-gapで定義されていましたが、現在は接頭語なしのgapに変わりました。ちなみに、現在はFirefoxのみですが、Flexboxでもgapを使うことができます。
gap: row(縦)の余白 横(column)の余白　で指定します。

.grid {  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 600px;
  gap: 10px 20px; //row(縦)の余白10px column(横)の余白20px
}

rowのみ指定する場合

gap: 10px 0; //rowのみ

columnのみ指定する場合

gap: 0 10px; //columnのみ

rowとcolumnの余白が同じ場合は一括指定もできます。

gap: 10px //rowとcolumnどっちも

また、column-gap,row-gapでも横のみ、縦のみ余白を定義することができます。

column-gap: 10px; //columnのみ

row-gap: 10px; //rowのみ