CSS Gridでレスポンシブ対応の代表的な5つのレイアウトを実装するテクニック
Post on:2020年12月1日
sponsors
Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニックを紹介します。
ヘッダ・コンテンツ・フッタを積み重ねたもの、12カラムのグリッド、メディアクエリなしのレスポンシブなど、実際によく使用されるレイアウトばかりです。
CSS Gridを使用すると、今まで少し複雑だったレイアウトもシンプルなコードで簡単に実装できます。
Master CSS Grid by Building 5 Layouts in 17 Minutes
by Thu Nghiem
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- はじめに
- 1. 基本的なレイアウト「パンケーキ スタック」
- 2. 基本的なレイアウト「12カラムのグリッドレイアウト」
- 3. grid-template-areasがある場合とない場合のレスポンシブレイアウト
- 4. メディアクエリなしのレスポンシブレイアウト
- 5. 12x12のマス目状のグリッド
はじめに
良いニュースと悪いニュースがあります。
悪いニュースは、CSS Gridは複雑で、学ぶべきことたくさんあるということです。
しかし、良いニュースは、最初にすべてを知る必要はないということです！
この記事では、CSS Gridを使用して5つのレイアウト（つまり5つのタスク）を実装します。記事を読み終えた後には、さっそく次のプロジェクトでCSS Gridを使用したくなるかもしれません。
チュートリアル用のファイルは、下記からダウンロードできます。
レイアウトのデザインは、下記にアップしました。
また、動画でも解説しています。
それでは、始めましょう！
1. 基本的なレイアウト「パンケーキ スタック」
パンケーキ スタック
1つ目のレイアウトは、パンケーキ スタックと呼ばれるものです。各カラムがパンケーキのように垂直方向に積み重なります。
このレイアウトを実装するには、grid-template-rows: auto 1fr auto;を使用して、3つのカラムを作成します。値が1frの2番目のカラムは使用可能なスペースいっぱいに拡張され、1と3番目のカラムはコンテンツを表示する最小限のスペースしかありません。
このレイアウトを実装するには、親コンテナに下記のCSSを記述するだけです。
|
1 2 3 4 5 6 |
.task-1.container { display: grid; height: 100vh; grid-template-rows: auto 1fr auto; } |
このレイアウトはよく見かけると思います。3つのカラムには、ヘッダ・コンテンツ・フッタを配置します。
例えば、数週間前の私のチュートリアルの1つにもあります。
ヘッダ・コンテンツ・フッタで構成された「パンケーキ スタック」
2. 基本的なレイアウト「12カラムのグリッドレイアウト」
12カラムのグリッドは長く使用されてきましたが、CSS Gridを使用することでさらに使いやすくなりました。
12カラムのグリッドの中から、.item-1で4カラム分、.item-2で6カラム分を使用してみます。
12カラムのグリッドレイアウト
最初に、12カラムのグリッドを作成します。
グリッドは、grid-template-columns: repeat(12, 1fr);で簡単に実装できます。
|
1 2 3 4 5 6 7 8 9 |
.task-2.container { display: grid; height: 100vh; grid-template-columns: repeat(12, 1fr); column-gap: 12px; align-items: center; } |
カラム間の溝を12pxにしています。また、Flexboxと同様にalign-items: center;をCSS Gridで使用することもできます。
参考: flexコンテナ: align-items（アイテムの配置方法）
続いて必要なのは、アイテムがどのカラムに入るかを定義することです。.item-1の場合は4カラム分なので、2番目のカラムから始まり、6番目で終わるようにします。
|
1 2 3 4 |
.task-2 .item-1 { grid-column-start: 2; grid-column-end: 6; } |
アイテムは定義した6を取るのではなく、2,3,4,5のみを.item-1に割り当てることに注意してください。
下記のように定義しても、同様の結果が得られます。
こちらの方が分かりやすいかもしれません。
|
1 2 3 4 |
.task-2 .item-1 { grid-column-start: 2; grid-column-end: span 4; } |
さらに、シンプルに記述することもできます。
|
1 2 3 |
.task-2 .item-1 { grid-column: 2 / span 4; } |
これと同じ記述で、.item-2にも6カラム分を割り当てます。
|
1 2 3 |
.task-2 .item-2 { grid-column: 6 / span 6; } |
12カラムのレイアウトは至るところにあります。
このテクニックを使用したチュートリアルもご覧ください。
12カラムのレイアウトを使ったテクニック
3. grid-template-areasがある場合とない場合のレスポンシブレイアウト
ここでは、2つのオプションを解説します。
1つ目は、上記で解説した12カラムのグリッドを使用します。
2つ目は、grid-template-areasというプロパティを使用します。
grid-template-areasがある場合とない場合のレスポンシブレイアウト
3.1. 12カラムのグリッドを使用
スマホ用
スマホ用は簡単です、1. 基本的なレイアウト「パンケーキ スタック」で解説したことを利用して、メインセクションを拡張します。また、デスクトップと同様にグリッドにはgap: 24px;の溝を与え、行だけでなく列も定義します。
|
1 2 3 4 5 6 7 |
.task-3-1.container { display: grid; height: 100vh; grid-template-rows: auto auto 1fr auto auto auto; gap: 24px; } |
タブレット用
スクリーンの幅が720pxより大きいタブレットでは、12カラムが4行必要で、3行目は可能な限り拡張されます。
|
1 2 3 4 5 6 |
@media (min-width: 720px) { .task-3-1.container { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto 1fr auto; } } |
上記で12カラムが実装できたので、各アイテムに必要なカラム数を定義します。
|
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 |
@media (min-width: 720px) { .task-3-1 .header { grid-column: 1 / span 12; } .task-3-1 .navigation { grid-column: 1 / span 12; } .task-3-1 .main { grid-column: 3 / span 10; } .task-3-1 .sidebar { grid-column: 1 / span 2; grid-row: 3; } .task-3-1 .ads { grid-column: 1 / span 2; } .task-3-1 .footer { grid-column: 3 / span 10; } } |
.task-3-1 .sidebarにgrid-row: 3;を与えていることに注目してください。サイドバーはDOMにおいてmainセクションの後にあるためです。
デスクトップ用
これはやってみてください。分からない場合は、YouTubeの解説をご覧ください。
実例
このレイアウトは、https://dev.to/にも採用されています。
3.2. grid-template-areasプロパティを使用
grid-template-areasを使用するには、アイテムのエリアを定義する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.task-3-2 .header { grid-area: header; } .task-3-2 .navigation { grid-area: nav; } .task-3-2 .ads { grid-area: ads; } .task-3-2 .sidebar { grid-area: sidebar; } .task-3-2 .main { grid-area: main; } .task-3-2 .footer { grid-area: footer; } |
エリアを定義したら、grid-template-areasでコンテナの位置を指定します。
スマホ用
スマホでは1カラムを6行作成します。mainである3行目は1frで可能な限り拡張するようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.task-3-2.container { display: grid; height: 100vh; gap: 24px; grid-template-rows: auto auto 1fr auto auto auto; grid-template-areas: "header" "nav" "main" "sidebar" "ads" "footer"; } |
エリアを定義したので、後からアイテムの順番や位置を変更したい場合に、とても簡単になります。
タブレット用
スクリーンが720pxより大きい場合は、3カラムを4行作成します。ヘッダとナビゲーション、どちらも3カラムです。
|
1 2 3 4 5 6 7 8 9 10 11 |
@media (min-width: 720px) { .task-3-2.container { grid-template-areas: "header header header" "nav nav nav " "sidebar main main" "ads footer footer"; grid-template-rows: auto auto 1fr auto; } } |
3行目と4行目では、sidebarとadsが1カラム分になり、mainとfooterは2カラム分にしています。
デスクトップ用
タブレットと同じロジックで、デスクトップの場合は4カラムを4行作成します。
|
1 2 3 4 5 6 7 8 9 10 11 |
@media (min-width: 1020px) { .task-3-2.container { grid-template-areas: "header header header header" "sidebar nav nav ads" "sidebar main main ads" "footer footer footer footer"; grid-template-rows: auto auto 1fr auto; } } |
まとめ
どちらのオプションにも長所と短所がありますが、自分にとって楽な方を選び、シナリオに意味があるものを選びましょう。
4. メディアクエリなしのレスポンシブレイアウト
メディアクエリなしのレスポンシブレイアウト
スマホ・タブレット・デスクトップで、メディアクエリなしのレスポンシブレイアウトを簡単に実装することができます。
|
1 2 3 4 5 6 |
.task-4.container { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } |
このCSSで行ったことは、カラムを150px以下にはしない、スペースを均等に分配する、という柔軟なレイアウトです。
5. 12x12のマス目状のグリッド
最後のタスクでは、カラムの数だけでなく、列の数も定義できます。
12x12のマス目状のグリッド
|
1 2 3 4 5 6 7 |
.task-5.container { display: grid; height: 100vh; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); } |
マス目状のグリッドは、アイテムを特定の場所に配置する必要がある場合に役立ちます。
これでチュートリアルは終了です。
完全なチュートリアルについては、YouTubeの解説をチェックしてください。
sponsors
