前回は、Grid レイアウトで作成したコンテンツの中に、さらに 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: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(2, minmax(5rem, auto));
  grid-template-columns: repeat(3, 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;
}

行ごとに位置を調整する

行ごとに位置を調整するには、containerクラスに、align-itemsを設定します。

例えば、上寄せにしたい場合は、align-items: start;を指定します。

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

ブラウザで確認すると、

image2

行ごとに上寄せになりました。

今度は、下寄せにするには、containerクラスにalign-items: end;を指定します。

ブラウザで確認すると、

image3 下寄せになりました。

そして今度は、行ごとに中央に寄せてみます。

中央に寄せる場合は、containerクラスにalign-items: center;を指定します。

ブラウザで確認すると、

image4

中央寄せになりました。

列ごとに位置を調整する

列ごとに位置を調整するには、containerクラスに、justify-itemsを設定します。

例えば、左寄せにしたい場合は、justify-items: start;を指定します。

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

ブラウザで確認すると、

image5

列が左寄せになりました。

今度は、右寄せにするには、containerクラスにjustify-items: end;を指定します。

ブラウザで確認すると、

image6

右寄せになりました。

そして今度は、列ごとに中央に寄せてみます。

中央に寄せる場合は、containerクラスにjustify-items: center;を指定します。

ブラウザで確認すると、

image7

列ごとで中央になりました。

では、align-itemsjustify-itemsを同時に使うとどうなるでしょう。

例えば、containerクラスに、justify-items: center;align-items: center;を指定してみます。

.container {
  background-color: #eee;
  max-width: 48rem;
  height: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(2, minmax(5rem, auto));
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

ブラウザで確認すると、

image8

それぞれのコンテンツが中央寄せになりました。

コンテンツ全体の位置を調整する

コンテンツ全体の位置を調整するには、containerクラスにalign-contentjustify-contentを使用します。

コンテンツ全体を、上寄せにしたい場合、align-content: start;を指定します。

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

ブラウザで確認すると、

image9

コンテンツ全体が上寄せになりました。

コンテンツ全体を下寄せにするには、containerクラスにalign-content: end;を指定します。

ブラウザで確認すると、

image10

コンテンツ全体が下寄せになりました。

コンテンツ全体を上下中央寄せにするには、containerクラスにalign-content: center;を指定します。

ブラウザで確認すると、

image11

コンテンツ全体が上下中央寄せになりました。

現在、containerクラスにgrid-template-columns: repeat(3, 1fr);を指定しているため、横幅が一杯になるよう指定されています。

containerクラスのgrid-template-columns: repeat(3, 5rem);に変えてみましょう。

image12

Grid レイアウトの幅より指定したコンテンツの幅が狭い場合、デフォルトでは、コンテンツ全体が左寄せなります。

コンテンツ全体を右寄せにしたい場合は、containerクラスにjustify-content: end;を指定します。

.container {
  background-color: #eee;
  max-width: 48rem;
  height: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(2, minmax(5rem, auto));
  grid-template-columns: repeat(3, 5rem);
  justify-content: end;
}

ブラウザで確認すると、

image13

コンテンツ全体が右寄せになりました。

コンテンツの左右中央に寄せるには、containerクラスにjustify-content: center;を指定します。

ブラウザで確認すると、

image14

コンテンツ全体が左右中央に寄りました。

では、コンテンツ全体が上下左右中央に寄るには、containerクラスにjustify-content: center;align-content: center;を指定します。

.container {
  background-color: #eee;
  max-width: 48rem;
  height: 20rem;
  border: 1px solid #000;
  display: grid;
  grid-template-rows: repeat(2, minmax(5rem, auto));
  grid-template-columns: repeat(3, 5rem);
  align-content: center;
  justify-content: center;
}

ブラウザで確認すると、

image15

コンテンツ全体が上下左右中央に寄りました。

特定のコンテンツの位置を調整する

今までは、行ごとや列ごと、コンテンツ全体の位置を調整しました。

次は、特定のコンテンツの位置を調整してみます。

例えば 1 番のコンテンツを調整してみましょう。

image16

1 番のコンテンツを上寄せにするには、item-1クラスに、align-self: start;を指定します。

.item-1 {
  background-color: darkgreen;
  align-self: start;
}

ブラウザで確認すると、

image17

1 番のコンテンツのみ上寄せになりました。

次に 1 番のコンテンツを下寄せにするには、item-1クラスに、align-self: end;を指定します。

ブラウザで確認すると、

image18

1 番のコンテンツのみ下寄せになりました。

次に 1 番のコンテンツを上下中央寄せにするには、item-1クラスに、align-self: center;を指定します。

ブラウザで確認すると、

image19

1 番のコンテンツのみ上下中央寄せになりました。

1 番のコンテンツを左寄せにするには、item-1クラスに、justify-self: start;を指定します。

.item-1 {
  background-color: darkgreen;
  justify-self: start;
}

ブラウザで確認すると、

image20

1 番のコンテンツのみ左寄せになりました。

1 番のコンテンツを右寄せにするには、item-1クラスに、justify-self: end;を指定します。

ブラウザで確認すると、

image21

1 番のコンテンツのみ右寄せになりました。

1 番のコンテンツを左右中央寄せにするには、item-1クラスに、justify-self: center;を指定します。

ブラウザで確認すると、

image22

1 番のコンテンツのみ左右中央寄せになりました。

最後に、1 番のコンテンツを上下左右中央寄せにするには、item-1クラスにjustify-self: center;align-self: center;を指定します。

.item-1 {
  background-color: darkgreen;
  align-self: center;
  justify-self: center;
}

ブラウザで確認すると、

image23

1 番のコンテンツのみ上下左右中央寄せになりました。

コンテンツの行ごとに位置を調整する場合:align-items コンテンツの列ごとに位置を調整する場合:justify-items コンテンツ全体の位置を調整する場合  :align-contentjustify-content 特定のコンテンツを調整する場合    :align-selfjustify-self

Grid レイアウトの位置を調整することができるので、ぜひ試してください。

ブログ一覧