グリッドレイアウトを使った自在なレイアウト方法

グリッドレイアウトを使った自在なレイアウト方法

グリッドレイアウトを使った聖杯レイアウト(Holy Grail Layout)

聖杯レイアウト(Holy Grail Layout)

聖杯レイアウト(Holy Grail Layout) は、3カラムのレイアウトで、企業のホームページなどでも好んで使われてきたものです。

 

ヘッダーとフッターに挟まれたところが、メニュー・コンテンツ・サブメニューといったような形で3カラムになっているレイアウトです。

 

実際の聖杯レイアウト(Holy Grail Layout) のコードのサンプルを作ってみました。
わかりやすいように、ヘッダーはブルー、メニューはピンク、コンテンツはグリーン、サブメニューはイエロー、フッターはパープルに色をつけています。

 

レスポンシブデザインで作っているので、画面の幅を狭めていくと、3カラムから2カラム、そして1カラムへと変化していくようになっています。

 

聖杯レイアウト(Holy Grail Layout)サンプル

See the Pen BGNgVa by 健康 美容 賢脳の話題 (@89314link) on CodePen.

 

 

3カラム変形パターン

コンテンツ、メニュー、サブメニューの順に並べ、コンテンツとメニューは割合固定、サブメニューは幅固定としたサンプル

See the Pen bQVQqy by 健康 美容 賢脳の話題 (@89314link) on CodePen.

グリッドレイアウトを使った2カラムレスポンシブレイアウト

左メニューの2カラムレスポンシブレイアウト

メニュー・サブメニューを左側に配置した2カラムレイアウトサンプル

See the Pen jQbaLP by 健康 美容 賢脳の話題 (@89314link) on CodePen.

 

 

右メニューの2カラムレスポンシブレイアウト

メニュー・サブメニューを右側に配置した2カラムレイアウトサンプル

See the Pen yQYPMe by 健康 美容 賢脳の話題 (@89314link) on CodePen.

ブログ型サムネイルレイアウトパーツ

ブログ型サムネイルレイアウトパーツのサンプル

See the Pen qQOLpv by 健康 美容 賢脳の話題 (@89314link) on CodePen.