前回は、Grid レイアウトでコンテンツの位置を調整する方法を紹介しました。

今回は、Grid レイアウトで Grid エリアを使ってコンテンツを配置する方法を紹介します。

少しとっつきにくい内容ですが、慣れれば簡単に使えるようになります。

基本のコードは、以下になります。

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
</div>
.container {
  background-color: #eee;
  max-width: 48rem;
  height: 24rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(6, minmax(4rem, auto));
  grid-template-columns: repeat(4, 1fr);
}
.item {
  padding: 1rem;
  text-align: center;
  color: white;
  border: 1px solid black;
}
.item-1 {
  background-color: darkgreen;
}

.item-2 {
  background-color: darkgrey;
}

.item-3 {
  background-color: darkkhaki;
}

.item-4 {
  background-color: darkslateblue;
}

.item-5 {
  background-color: darkgoldenrod;
}

.item-6 {
  background-color: darkred;
}

Grid エリアを指定するには、grid-template-areasgrid-areaを使います。

まず、1 から 6 のコンテンツにgrid-areaを指定します。

.item-1 {
  background-color: darkgreen;
  grid-area: item-1;
}

.item-2 {
  background-color: darkgrey;
  grid-area: item-2;
}

.item-3 {
  background-color: darkkhaki;
  grid-area: item-3;
}

.item-4 {
  background-color: darkslateblue;
  grid-area: item-4;
}

.item-5 {
  background-color: darkgoldenrod;
  grid-area: item-5;
}

.item-6 {
  background-color: darkred;
  grid-area: item-6;
}

次に、containerクラスにgrid-template-areasを指定します。

指定する方法は、行ごとに""で囲ってレイアウトします。

書き方は、以下になります。

grid-template-areas:
  "item-1 item-1 item-1 item-1"
  "item-2 item-2 item-3 item-3"
  "item-2 item-2 item-3 item-3"
  "item-4 item-4 item-4 item-5"
  "item-4 item-4 item-4 item-5"
  "item-6 item-6 item-6 item-6";

Grid の列は、grid-template-columns: repeat(4, 1fr);で 4 列と指定したので、""の中は、"item-1 item-1 item-1 item-1"となります。

1 行がitem-1の領域ですよ、という意味です。

Grid の行は、grid-template-rows: repeat(6, minmax(4rem, auto));で 6 行と指定したので、""を 6 回書きます。

item-2は 2 行目と 3 行目にまたがっています。

つまり、2 行目の 1 列目、2 列目と 3 行目の 1 列目、2 列目は、item-2の領域ですよ、という意味です。

このようにして、 テキストをマス目上に見立てて作成していきます。

図で表すと、このような形になります。

image2

ブラウザで確認すると、

image3

.container {
  background-color: #eee;
  max-width: 48rem;
  height: 24rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(6, minmax(4rem, auto));
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "item-1 item-1 item-1 item-1"
    "item-2 item-2 item-3 item-3"
    "item-2 item-2 item-3 item-3"
    "item-4 item-4 item-4 item-5"
    "item-4 item-4 item-4 item-5"
    "item-6 item-6 item-6 item-6";
}

コンテンツが配置できました。

注意していただきたいのは、必ずコンテンツは長方形になるようにしてください。

例えば、item-4 を L 字型にしたいと思い、以下のコードを入力してしまうと、

grid-template-areas:
  "item-1 item-1 item-1 item-1"
  "item-2 item-2 item-3 item-3"
  "item-2 item-2 item-3 item-3"
  "item-4 item-5 item-5 item-5"
  "item-4 item-4 item-4 item-5"
  "item-6 item-6 item-6 item-6";

image4

正常に読み取れなくなり、Grid レイアウト内にコンテンツが配置できません。

grid-template-areasをエディタで書くときは、改行しなくてもかけるのですが、

grid-template-areas: "item-1 item-1 item-1 item-1" "item-2 item-2 item-3 item-3" "item-2 item-2 item-3 item-3" "item-4 item-5 item-5 item-5" "item-4 item-4 item-4 item-5" "item-6 item-6 item-6 item-6";

わかりづらくなるので、改行して書くことをおすすめします。

Grid エリアは、直感的に並べることができるので、ぜひ使ってみてください。

ブログ一覧