前回は、Grid レイアウトの縦並びと横並びを紹介しました。

今回は、グリッドの線を使いグリッドの位置を指定して、コンテンツを配置する方法を紹介します。

こちらを使用することで、コードの記述順に囚われずにコンテンツを配置することができます。

グリッドの線の考え方

例えば、行が 5 行、列が 6 行の Grid があるとします。

image2

このグリッドは、行が 6 本、列が 7 本の線で成り立っています。

image3

この線を指定して、コンテンツを配置することができます。

例えば、左上に 2×2 のコンテンツを配置したい場合、グリッドの線は、行が 1 から 3 本目まで、列が 1 から 3 本目までになります。

image4

右下に 3×3 のコンテンツを配置したい場合、グリッドの線は、行が 3 から 6 本目まで、列が 4 から 7 本目までになります。

image5

コンテンツを配置するには、グリッドの線の番号が重要になります。

コンテンツを配置する

では、実際にコンテンツを配置してみましょう。

コードは、以下の通りです。

<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: 20rem;
  border: 1px solid #000;
  display: grid;
}
.item {
  padding: 1rem;
  text-align: center;
  color: white;
}
.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;
}

image6

まずは、5 行、6 列の Grid を作成します。

行は、grid-template-rowsで指定します。

指定する行は 6 行なので、repeat(5, 1fr)で表すことができます。

1fr というのは、元々の数値をある数で割った場合の割合の重さになります。

例えば、100 を 4 で割った場合、1fr は 100/4=25 となります。

2fr は、50 となります。

話に戻ると、repeat(6, 5fr)は、1fr が 5 回繰り返すという意味になります。

つまり、5 等分です。

次に、列は、grid-template-columnsで指定します。

指定する列は 6 列なので、repeat(6, 1fr)で表すことができます。

コードは、以下の通りです。

.container {
  background-color: #eee;
  max-width: 48rem;
  height: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(6, 1fr);
}

ブラウザを確認すると、

image7

コンテンツが、左上から順番に並びました。

では、1 番目のコンテンツを左上の 2 行 3 列で配置していきます。

グリッドの線を指定するには、grid-rowgrid-columnにグリッド線の番号を指定します。

image8

2 行にするには、grid-rowを 1 から 3 まで指定します。

コードの書き方は、grid-row: 1/3;です。

次に、列は 3 列なので、grid-columnを 1 から 4 まで指定します。

コードの書き方は、grid-column: 1/4;です。

1 番目のコンテンツを指定するために、grid-rowgrid-columnitem-1クラスに指定します。

.item-1 {
  background-color: darkgreen;
  grid-row: 1/3;
  grid-column: 1/4;
}

ブラウザで確認すると、

image9

コンテンツが配置されました。

5 番目と 6 番目のコンテンツは、自動で次の行になっています。

次に、2 番目のコンテンツを、右下の 3 行 3 列で配置していきます。

image10

1 番目のコンテンツと同様に、grid-rowを 3 から 6 まで、grid-columnを 4 から 7 まで指定します。

.item-2 {
  background-color: darkgrey;
  grid-row: 3/6;
  grid-column: 4/7;
}

ブラウザで確認すると、

image11

2 番目のコンテンツが右下に行きました。

3 番目のコンテンツを右上 2 行 2 列に配置します。

image12

grid-rowを 1 から 3 まで、grid-columnを 5 から 7 まで指定します。

.item-3 {
  background-color: darkkhaki;
  grid-row: 1/3;
  grid-column: 5/7;
}

ブラウザで確認すると、

image13

3 番目のコンテンツが右上に表示されました。

4 番目のコンテンツを下中央 3 行 1 列に配置します。

image14

grid-rowを 3 から 6 まで、grid-columnを 3 から 4 まで指定します。

.item-4 {
  background-color: darkslateblue;
  grid-row: 3/6;
  grid-column: 3/4;
}

ブラウザで確認すると、

image15

4 番目のコンテンツが中央下に表示されました。

5 番目のコンテンツを中央上に配置します。

image16

grid-rowを 1 から 3 まで、grid-columnを 4 から 5 まで指定します。

.item-5 {
  background-color: darkgoldenrod;
  grid-row: 1/3;
  grid-column: 4/5;
}

ブラウザで確認すると、

image17

5 番目のコンテンツが中央上に表示されました。

最後に、6 番目のコンテンツを左下に配置します。

image18

grid-rowを 3 から 6 まで、grid-columnを 1 から 3 まで指定します。

.item-6 {
  background-color: darkred;
  grid-row: 3/6;
  grid-column: 1/3;
}

ブラウザで確認すると、

image19

全て、埋まりました。

CSS の全文は、以下の通りです。

.container {
  background-color: #eee;
  max-width: 48rem;
  height: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(6, 1fr);
}
.item {
  padding: 1rem;
  text-align: center;
  color: white;
}
.item-1 {
  background-color: darkgreen;
  grid-row: 1/3;
  grid-column: 1/4;
}

.item-2 {
  background-color: darkgrey;
  grid-row: 3/6;
  grid-column: 4/7;
}

.item-3 {
  background-color: darkkhaki;
  grid-row: 1/3;
  grid-column: 5/7;
}

.item-4 {
  background-color: darkslateblue;
  grid-row: 3/6;
  grid-column: 3/4;
}

.item-5 {
  background-color: darkgoldenrod;
  grid-row: 1/3;
  grid-column: 4/5;
}

.item-6 {
  background-color: darkred;
  grid-row: 3/6;
  grid-column: 1/3;
}

このように、グリッドの線を指定すると、自由に、そして簡単にコンテンツを配置することができます。

ぜひ、試してみてください。

ブログ一覧