本記事ではCSSのグリッドレイアウトの使用方法をまとめます。
グリッドレイアウトの基本的な使用方法
グリッドレイアウト
…行と列を使用して、要素を配置できます。例えば要素をタイルのように配置することができます。
CSSの基本的な書き方は以下になります。
display:grid;
まずこのグリッドレイアウトを使用するために以下の概念を理解する必要があります。
Gridコンテナー（親要素） ：濃い青色の箇所
Gridアイテム（子要素） ：水色の箇所
Gridギャップ：点線箇所
なんとなく理解できたところで実際のソースコードを書いて画面を確認してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッドレイアウトについて</title>
<style>
.child {
background-color: blue;
color: white;
font-weight: bold;
text-align: center;
padding: 20px;
}
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="child">子要素１</div>
<div class="child">子要素２</div>
<div class="child">子要素３</div>
<div class="child">子要素４</div>
<div class="child">子要素５</div>
<div class="child">子要素６</div>
</div>
</body>
</html>
画面はこのように表示されます。
先ほど記したスタイルが各要素の何の設定にあてがわれているか細かく確認していきます。
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 10px;
}
display: grid;
…グリッドレイアウトを使用するプロパティと値です。
grid-template-columns: 200px 200px 200px;
…グリッドコンテナの列の幅を指定しています。
これにより、グリッドアイテム（子要素）の行を設定することができます。
（上記は子要素のpxを指定しています。）詳しい説明については後程行います。
**
gap: 10px;
…グリッドアイテム同士のスペースを指定しています。
このように記述することでWebページをタイルのようなレイアウトにすることができます。
grid-template-columns
…先ほども出てきましたが、このプロパティは横並びについての指定を行うことができます。
このようにcssを記載していた場合
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
gap: 10px;
}
画面では要素が３列に並べられています。
このgrid-template-columns: 200px 200px 200px; の部分に200pxをもうひとつ追加して
画面を確認してみます。
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
gap: 10px;
}
すると４列で要素が表示されるようになります。
このように横並びについての設定を行うことができます。
また、下記のようにpx数を変更した場合、
.container {
display: grid;
grid-template-columns: 100px 150px 300px 200px;
gap: 10px;
}
CSSで指定した通り、左から100px、15opx、300px、200pxが設定されます。
また、下記のようにpx数ではなくautoを記載した場合、
.container {
display: grid;
grid-template-columns: 100px 150px auto 200px;
gap: 10px;
}
autoと指定した「子要素３」が下記のようになります。（画面いっぱいになるように列の幅がautoで指定されます。）
次に、下記のような「fr（fraction）」という単位で値を指定した場合
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
画面幅を動かしても４等分が保たれるようになります。
＜画面を大きくした場合＞
＜画面を小さくした場合＞
「fr」を用いて下記のように指定することもできます。
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 10px;
}
このように指定すると、画面の横幅を４分割したうちの
４分の１が左の列で、４分の３が右の列というように設定することも可能です。（この場合も画面を小さくして主）
「fr」と「px」両方を用いての指定も可能です。
.container {
display: grid;
grid-template-columns: 1fr 1fr 100px 1fr;
gap: 10px;
}
この場合、画像を大きくしたり小さくしたりすると、
pxで指定した列のみ横幅が固定され、frで指定した列は可変となります。
＜画面を大きくした場合＞
＜画面を小さくした場合＞
grid-template-rows
…このプロパティは縦の並びについての指定を行うことができます。
スタイルを下記のように記述します。
.container {
display: grid;
grid-template-coloms: 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
画面は下記のようになります。
grid-template-rowsで100pxを指定することによって要素の高さが100pxに指定されています。
このgrid-template-rowsもgrid-template-columnsと同様の方法でautoやfrといった指定が可能です。
repeat関数
…CSSグリッドレイアウト使用時に、簡潔にソースコードを記載するための関数です。
使用方法は下記です。
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
↓
grid-template-columns: repeat(5,1fr);
この書き方をすることで「1frを5回繰り返す」という意味になります。
例えば10列以上要素の幅を指定する必要があるときなどに使用します。
minmax関数
…これは要素の最大値・最小値を指定することのできる関数です。
下記の例のように値を設定します。
grid-template-columns: repeat(3, minmax(300px,1fr));
こちらをスタイルに設定して実際に動きを確認してみます。
＜画面を大きくした場合＞
＜画面を小さくした場合＞
画面を小さくしたときに、可変だった要素の横幅が300pxで止まり、画面から見切れるようになります。
このように要素の幅の最大値最小値を指定することができます。