こんにちは、Mochiです。
Webデザインにおいて、柔軟にレイアウトを組めることは重要です。CSS Gridはそのための非常に強力なツールです。
CSS Gridってどうやって使うの？Gridを使って横並びにするのって、どうやるんだっけ？🤔
そのような方に向けて、CSS Gridの仕組みとその使い方をわかりやすく解説します。
この記事を読むことで、みなさんはCSS Gridの仕組みを深く理解し、使いこなしてレイアウトを組めるようになります。
では早速、CSS Gridとは何なのか学んでいきましょう。
🤔CSS Gridとは
CSS Gridは、柔軟なレイアウトを構築するために、HTML要素を縦と横のグリッド（マス目状）に配置するプロパティのセットです。Flexboxは直線的な1次元のレイアウトを得意としますが、CSS Gridは平面的な2次元のレイアウトを得意とします。このため、複雑なレイアウトを効率的に構築するのに適しています。
1次元のレイアウトを組みたい方は記事「CSSのFlexboxの仕組みを深く理解して使いこなそう！」を読むのがおすすめです。
CSS Gridの仕組み
CSS Gridの仕組みである、主な構成要素は次のようになります。
- Gridコンテナ: 大枠となる箱のようなものです。このコンテナの中でレイアウトを組んでいきます。
- Gridアイテム: コンテナ内の小要素のことで、実際に並べていくアイテムたちです。
- 行の軸: 行の方向を表します。
- 列の軸: 列の方向を表します。
より詳細な構成要素は次のようになります。
- Gridライン: 行や列を分ける線です。行と列に別々で存在し、1から順に番号が付けられています。逆方向からはマイナスの番号が付けられています。
- Gridセル: 行と列で分けられた、マス目の部分を表します。レイアウトの最小単位です。
- ガター: Gridアイテムの間にある余白のことです。
- Gridトラック: 行や列のグリッドアイテムをまとめたものです。単純に行や列を表します。
Gridの仕組みを理解したところで、次は実際に使っていきましょう。
🎬CSS Gridを使い始める
display: grid
CSS Gridを使い始めるためにdisplay: gridを用います。この指定により、Gridコンテナが作られてGridによるレイアウトを組み始めることができます。
例えば次のように使います。
.grid-container {
display: grid;
}ではGridコンテナの使い方から学んでいきましょう。
📦Gridコンテナの使い方
Gridコンテナを操作してレイアウトを組むために重要なプロパティを解説します。
grid-template-columns: 列のレイアウト
grid-template-columns プロパティは、列のレイアウトを指定できます。
指定した数だけ列ができます。
列の長さに指定できる値は次のようなものです。
- 200px: ピクセル単位で設定
- 20%: 親要素（Gridコンテナ）に対する比率で設定
- 1fr: 大きさが指定されていない領域の中で、スペースを設定
- auto: Gridアイテムを入れるのに必要なだけの大きさを設定
特徴的なのは1frです。これは1fractionの略で、比率を表します。よって、1frに対して2frは2倍の大きさになります。
frを指定するメリットは、画面の幅に合わせて自動的に伸び縮みしてくれることです。
例えば次のように使います。
.grid-container {
grid-template-columns: 40px 1fr 2fr;
}grid-template-rows: 列のレイアウト
grid-template-rows プロパティは、行のレイアウトを指定できます。
仕組みはgrid-template-columnsと同じで、指定した数だけ行ができます。
行の長さに指定できる値は次のものです。
- 10px: ピクセル単位で設定
- 10%: 親要素（Gridコンテナ）に対する比率で設定
- 1fr: 大きさが指定されていない領域の中で、スペースを設定
- auto: Gridアイテムを入れるのに必要なだけの大きさを設定
また、同じ値を複数回指定するためには、repeat()を使うと便利です。repeat()には繰り返す回数と繰り返す値を与えます。
例えば次のように使います。
.grid-container {
grid-template-rows: repeat(4, 1fr);
}gap: 余白
gapプロパティは、ガター（行と列の間）の余白の大きさを指定できます。column-gap を使うことで列の間の余白だけ指定できます。また、row-gap を使うことで行の間の余白だけ指定できます。
また先頭に”grid”をつけた、grid-gap 、grid-row-gap、grid-column-gap プロパティでも同じことができます。
例えば次のように使います。
.grid-container {
gap: 30px;
}justify-items: 水平方向の配置
justify-items プロパティは、Gridアイテムの水平方向の配置を決めます。
指定できる値は次のものです。
stretch: Gridセルいっぱいに伸びる（デフォルト）start: 開始位置に配置center: 中央に配置end: 終了位置に配置
例えば次のように使います。
.grid-container {
justify-items: center;
}align-items: 垂直方向の配置
align-items プロパティは、Gridアイテムの垂直方向の配置を決めます。
指定できる値は次のものです。
stretch: Gridセルいっぱいに伸びる（デフォルト）start: 開始位置に配置center: 中央に配置end: 終了位置に配置baseline: ベースラインに配置
例えば次のように使います。
.grid-container {
align-items: center;
}justify-content: グリッドの水平方向の配置
justify-content プロパティは、Gridアイテム全体を含めたグリッドの水平方向の配置を決めます。これはGridコンテナよりGridアイテム全体が小さい場合に利用できます。
指定できる値は次のものです。
stretch: Gridコンテナいっぱいに伸びるstart: 開始位置に配置center: 中央に配置end: 終了位置に配置space-between: 両端に配置し、他のGridトラックを均等に配置space-around: 均等に配置し、両端には半分の大きさの余白を入れるspace-evenly: 均等に配置
例えば次のように使います。
.grid-container {
justify-content: center;
}align-content: グリッドの垂直方向の配置
align-content プロパティは、Gridアイテム全体を含めたグリッドの垂直方向の配置を決めます。こちらもはGridコンテナよりGridアイテム全体が小さい場合に利用できます。
指定できる値は次のものです。
stretch: Gridコンテナいっぱいに伸びるstart: 開始位置に配置center: 中央に配置end: 終了位置に配置space-between: 両端に配置し、他のGridトラックを均等に配置space-around: 均等に配置し、両端には半分の大きさの余白を入れるspace-evenly: 均等に配置
例えば次のように使います。
.grid-container {
align-content: center;
}Gridコンテナ全体の大きさ
Gridコンテナ全体の大きさはwidhtとheightプロパティを指定することで、調整できます。
.grid-container {
width: 1280px;
height: 200px;
}
💍Gridアイテムの使い方
Gridアイテムを操作してレイアウトを調整するために重要なプロパティを解説します。
grid-column: 列の位置と範囲
grid-column プロパティは、Gridアイテムを置くGridセルの列の位置を指定します。位置を指定するために、Gridラインの番号を使います。
指定できる値は次のようなものです。
1: Gridラインの番号-1: 反対から数えたGridラインの番号span 2: セルの個数
与え方には次の種類があります。
1: 指定したGridラインの番号からその次のライン番号(2)まで1 / 3: 始まりのGridラインの番号から、終わりの番号まで1 / span2: 始まりのGridラインの番号から、spanで指定したセルの個数まで
例えば次のように使います。
.grid-item {
grid-column: 2 / -1; /* -1は最後を表す */
}grid-row: 行の位置と範囲
grid-row プロパティは、Gridアイテムを置くGridセルの行の位置を指定します。同じく位置を指定するために、Gridラインの番号を使います。
指定できる値は次のようなものです。
1: Gridラインの番号-1: 反対から数えたGridラインの番号span 2: セルの個数
与え方には次の種類があります。
1: 指定したGridラインの番号からその次のライン番号(2)まで1 / 3: 始まりのGridラインの番号から、終わりの番号まで1 / span2: 始まりのGridラインの番号から、spanで指定したセルの個数まで
例えば次のように使います。
.grid-item {
grid-row: 1 / -1; /* -1は最後を表す */
}justify-self: 水平方向の配置
justify-self プロパティは、Gridアイテムの水平方向の配置を指定します。Gridコンテナで指定したjustify-itemsの配置を上書きすることができます。
指定できる値は次のものです。
stretch: Gridセルいっぱいに伸びる（デフォルト）start: 開始位置に配置center: 中央に配置end: 終了位置に配置
例えば次のように使います。
.grid-item {
justify-self: center;
}align-self: 垂直方向の配置
align-self プロパティは、Gridアイテムの水平方向の配置を指定します。Gridコンテナで指定したalign-itemsの配置を上書きすることができます。
指定できる値は次のものです。
stretch: Gridセルいっぱいに伸びる（デフォルト）start: 開始位置に配置center: 中央に配置end: 終了位置に配置baseline: ベースラインに配置
例えば次のように使います。
.grid-item {
align-self: center;
}🎉まとめ
今回はCSS Gridの仕組みと使い方を解説しました。
この記事を読んだことで、みなさんはCSS Gridの仕組みを深く理解し、使いこなしてレイアウトを組めるようになりました！素晴らしいスキルアップです👏
CSS Gridを使いこなすことで、要素の正確な配置や柔軟なレスポンシブデザイン、複雑なレイアウトの構築ができます。ぜひ自分のイメージ通りのレイアウトを組んでみましょう。
