![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/08/01
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、CSSのgridレイアウトについて説明いたします。
gridレイアウトの特徴
floatやflexboxレイアウトは、
アイテムを一方的に並べることでレイアウトを作る
「１次元」のレイアウト手法です。
それに対し、gridレイアウトは縦横それぞれにグリッド線を引き、
格子状のセルを作成し、そこにコンテンツをはめ込む、
「２次元」のレイアウト手法です。
webサイト全体をグリッドでレイアウトする例
1. 親要素にdisplay : gridを指定する。
(今回はcontainerを親要素にします。)
2. 作りたいグリッドの行、列のサイズを決める。
( grid-template-rows: 100px 1fr 100px;
grid-template-columns: 200px 1fr 200px;
row= 縦幅のサイズ、columns=横幅のサイズ
※frとはfraction(比率)のこと)
3. エリアに名前を付ける。
今回の場合、３×３のレイアウトにするので、
すべてに名前を付ける。
grid-template-areas:
"header header header"
"side1 main side2"
"footer footer footer";
のように半角スペースで区切って、指定する。
4. 各エリアに配置する。
【例】
|
1 2 3 4 5 6 7 |
<div class="container"> <header class="header">ヘッダー</header> <main class="main">メイン</main> <aside class="side1">サイドバー1</aside> <aside class="side2">サイドバー2</aside> <footer class="footer">フッター</footer> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.container { display: grid; grid-template-rows: 100px 1fr 100px; grid-template-columns: 200px 1fr 200px; grid-template-areas: "header header header" "side1 main side2" "footer footer footer" } .header{ background-color: rgb(255, 215, 221); grid-area: header; } .side1 { background-color: rgb(75, 204, 75); grid-area: side1; } .side2 { background-color: rgb(122, 96, 238); grid-area: side2; } .main { background-color: rgb(247, 90, 90); grid-area: main; } .footer{ background-color: rgb(252, 232, 120); grid-area: footer; } |
均等幅の複数行均等レイアウトの例
1. 親要素にdisplay : gridを指定する。
2. グリッドの列サイズをrepeatを使って、指定する。
grid-template-columns: repeat(5, 1fr);
※1fr 1fr 1fr 1fr 1frをまとめて記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<main> <ul class="box"> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> <li>グリッドコンテナ</li> </ul> </main> |
|
1 2 3 4 5 6 7 8 9 10 |
.box { display: grid; gap: 20px; grid-template-columns: repeat(5, 1fr) } .box li { list-style: none; height: 150px; background-color: rgb(214, 214, 214); } |
このように簡単にグリッドレイアウトを作成できます。
また、特定の要素のサイズを変更したいときには、
変更したい要素にclassを追加して、
grid-column と grid-row を使って設定ができます。
【例】
|
1 2 |
grid-column: 1/3; grid-row: 1/3; |
「始まりのライン/終わりのライン」で記述することで、調節できます。
上記の例のサイズだと、グリッドラインを引いた、
1番目のラインから3番目のラインまでのサイズになります。
(グリッド2つ分)
Grid Layoutを学べば、今までの概念を覆すような方法で
ウェブサイトのレイアウトを効率的に構築できます。
ここまで読み進めていただき、ありがとうございました。
