序章

CSSグリッドレイアウトを使用すると、コンテナ内のグリッド自体とグリッドアイテムを、justify-items、align-items、justify-content、[の6つのプロパティで配置できます。 X169X]、justify-self、およびalign-self。 これらのプロパティは、 CSSボックス配置モジュールの一部であり、フレックスボックスまたはCSSグリッドのいずれかを使用して要素を配置する標準的な方法を定義します。

ほとんどの配置プロパティはグリッドコンテナに適用されますが、特定のグリッドアイテムにのみ適用される値を指定する場合に備えて、グリッドアイテム用のプロパティもあります。

この記事では、CSSグリッドの各プロパティについて説明します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

  • CSSプロパティと値の理解。
  • コードエディタ。
  • CSSグリッドをサポートする最新のWebブラウザ。

ステップ1—グリッドコンテナのプロパティを使用する

6つのネストされた<div>要素を持つコンテナ<div>要素のマークアップについて考えてみます。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

次のCSSルールを使用します。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;

  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;

  background: rgba(114, 186, 94, 0.05);
  border: 2px dashed rgba(114, 186, 94, 0.35);
}

.item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: rgba(255, 213, 70, 0.4);
  border: 2px dashed rgba(236, 198, 48, 0.5);
}

このコードは、100px幅の3列のグリッドレイアウトを生成します。 各グリッドアイテムには、widthの50pxとheightの50pxがあります。

1
2
3
4
5
6

この時点では、正当化と調整は設定されていません。 デフォルトでは、グリッドアイテムはコンテナの左上から始まります。

justify-items

justify-itemsは、行軸に沿ったグリッドアイテムを揃えるために使用されます。 可能な値は、start、end、center、およびstretchです。

centerの例を次に示します。

.container {
  /* ... */
  justify-items: center;
}
1
2
3
4
5
6

グリッドアイテムは、列の中央に水平に配置されます。

endの例を次に示します。

.container {
  /* ... */
  justify-items: end;
}
1
2
3
4
5
6

グリッドアイテムは、列の遠端に水平に配置されます。

align-items

align-itemsは、列軸に沿ってグリッドアイテムを整列するために使用されます。

centerの例を次に示します。

.container {
  /* ... */
  align-items: center;
}
1
2
3
4
5
6

グリッドアイテムは、列の中央に垂直に配置されます。

endの例を次に示します。

.container {
  /* ... */
  align-items: end;
}
1
2
3
4
5
6

グリッドアイテムは、列の下部に垂直に配置されます。

justify-content

グリッド全体がグリッドコンテナのスペースよりも小さい場合は、justify-contentを使用して、行軸に沿ってグリッドを揃えます。 次の値を使用できます：start、end、center、stretch、space-around、space-between、またはspace-evenly。

endの例を次に示します。

.container {
  /* ... */
  justify-content: end;
}
1
2
3
4
5
6

グリッドコンテンツは、コンテナ要素の遠端に水平に配置されます。

.container {
  /* ... */
  justify-content: space-evenly;
}
1
2
3
4
5
6

グリッドコンテンツは、コンテナ要素内で水平方向に等間隔に配置されます。

align-content

align-contentは、グリッドコンテンツを列軸に沿って整列させるために使用されます。

endの例を次に示します。

.container {
  /* ... */
  align-content: end;
}
1
2
3
4
5
6

space-evenlyの例を次に示します。

.container {
  /* ... */
  align-content: space-evenly;
}
1
2
3
4
5
6

justify-items、align-items、justify-content、およびalign-contentは、グリッド全体に適用される4つのプロパティです。

ステップ2—グリッドアイテムのプロパティを使用する

justify-selfおよびalign-selfは、コンテナーで使用可能な同等のプロパティ（justify-itemsおよびalign-items）に類似していますが、アイテムに直接適用され、アイテムの配置が異なります。残りのグリッドアイテム。

justify-self

justify-selfは、行軸に沿ってグリッドアイテムを整列するために使用されます。

endの例を次に示します。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="justify-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
1
2
3
4
5
6

3番目の項目は、列の遠端に水平に配置されます。

align-self

align-selfは、列軸に沿ってグリッドアイテムを整列するために使用されます。

endの例を次に示します。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="align-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
1
2
3
4
5
6

3番目の項目は、列の下部に垂直に配置されます。

justify-selfとalign-selfは、グリッドアイテムに直接適用される2つのプロパティです。

ステップ3—複数のプロパティを使用する

行軸と列軸の組み合わせを使用して、必要なグリッドを作成するためにCSSグリッドプロパティが必要になる場合があります。

justify-content: space-evenly、justify-items: center、align-content: space-evenly、およびalign-items: centerの組み合わせを使用する例を次に示します。

.container {
  /* ... */
  justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;
  align-items: center;
}
1
2
3
4
5
6

このコードは、等間隔で含まれている要素の中央に配置された6つのグリッドアイテムを生成します。

他の組み合わせを使用して、目的のグリッドを実現します。

結論

この記事では、CSSグリッドの各プロパティについて説明しました。

2020年の時点で、95% ofブラウザはCSSグリッドをある程度サポートしています。 詳しくは、 css-grid を使用できますか？を参照してください。 Webアプリケーションに組み込む前に、ターゲットオーディエンスがこの機能を利用できることを確認してください。

CSSの詳細については、CSSトピックページで演習とプログラミングプロジェクトを確認してください。