css grid(グリッド)でレイアウトをする方法

親要素にdisplay: grid; を指定するとグリッドコンテナに指定ができ、子要素がグリッドアイテムになります。グリッドコンテナに列と行を定義し、その中のグリッドアイテムを自由に配置する方法を見ていきます。

グリッドコンテナを作成する

使うhtml

<div class="ex">
     <div class="item item1">アイテム1</div>
     <div class="item item2">アイテム2</div>
     <div class="item item3">アイテム3</div>
     <div class="item item4">アイテム4</div>
     <div class="item item5">アイテム5</div>
     <div class="item item6">アイテム6</div>
</div>

グリッド内に列と行を定義する

.ex {
     display: grid;
     grid-template-columns: 200px auto;
     grid-template-rows: 50px 50px 200px;
     grid-gap: 10px;
}

grid-template-columns: 200px auto; グリッド内の列のサイズを定義します。

grid-template-rows: 50px 50px 200px; グリッド内の行のサイズを定義します。

grid-gap: 10px; アイテムの隙間の大きさ

fr単位

.ex {
     display: grid;
     grid-template-columns: 1fr 2fr;
     grid-template-rows: 50px 1fr 50px;
     grid-gap: 5px;
}

frはグリッドのサイズを等分させます、グリッドのサイズによって伸縮します。

repeat

repeatで短縮して書くこともできます。

.ex {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 50px);
     grid-gap: 5px;
}

グリッド内にアイテムを自由に配置する

定義した列と行を指定して、アイテムを配置していきます。指定の仕方２パターン紹介します。

以下のようにアイテムを配置していきます。

パターン１グリッド線を指定して配置する

まずは列と行を定義します。

.ex {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 50px auto auto 100px;
     grid-gap: 5px;
}

このように列と行を定義した場合、グリッド線は以下のようになります。

colmnsのグリッド線の数は 4本、rowsのグリッド線の数は5本あることになります。

グリッドアイテムにgrid-columnプロパティと、grid-rowプロパティを使ってグリッド線を指定して、配置していきます。

アイテム１の場合

grid-column: 1 / 4;

grid-row: 1 / 2;

※grid-column: 1 / -1;とも書くこともできます。

アイテム2の場合

grid-column: 1 / 2;

grid-row: 2 / 4;

のようにして指定します。

全てのアイテムも同様に指定していきます

.item1 {
     grid-column: 1 / 4;
     grid-row: 1 / 2;
}

.item2 {
     grid-column: 1 / 2;
     grid-row: 2 / 4;
}

.item3 {
     grid-column: 2 / 4;
     grid-row: 2 / 3;
}

.item4 {
     grid-column: 2 / 3;
     grid-row: 3 / 4;
}

.item5 {
     grid-column: 3 / 4;
     grid-row: 3 / 4;
}

.item6 {
     grid-column: 1 / 4;
     grid-row: 4 / 5;
}

以上がパターン１のグリッド線でアイテムを配置する方法でした。

パターン２エリアを指定して配置する

列と行とエリアを定義する

.ex {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 50px auto auto 100px;
     grid-gap: 5px;
     grid-template-areas: "a a a" 
                          "b c c"
                          "b d e"
                          "f f f";
}

列と行でできたエリアにそれぞれ名前をつけていきます。

grid-areaプロパティを使ってアイテムに配置したいエリアを指定していきます。

.item1 {
     grid-area: a;
}

.item2 {
     grid-area: b;
}

.item3 {
     grid-area: c;
}

.item4 {
     grid-area: d;
}

.item5 {
     grid-area: e;
}

.item6 {
     grid-area: f;
}

以上がパターン２のやり方でした。