
聖杯レイアウト(Holy Grail Layout) は、3カラムのレイアウトで、企業のホームページなどでも好んで使われてきたものです。
ヘッダーとフッターに挟まれたところが、メニュー・コンテンツ・サブメニューといったような形で3カラムになっているレイアウトです。
実際の聖杯レイアウト(Holy Grail Layout) のコードのサンプルを作ってみました。
わかりやすいように、ヘッダーはブルー、メニューはピンク、コンテンツはグリーン、サブメニューはイエロー、フッターはパープルに色をつけています。
レスポンシブデザインで作っているので、画面の幅を狭めていくと、3カラムから2カラム、そして1カラムへと変化していくようになっています。
聖杯レイアウト(Holy Grail Layout)サンプル
See the Pen BGNgVa by 健康 美容 賢脳の話題 (@89314link) on CodePen.
コンテンツ、メニュー、サブメニューの順に並べ、コンテンツとメニューは割合固定、サブメニューは幅固定としたサンプル
See the Pen bQVQqy by 健康 美容 賢脳の話題 (@89314link) on CodePen.
メニュー・サブメニューを左側に配置した2カラムレイアウトサンプル
See the Pen jQbaLP by 健康 美容 賢脳の話題 (@89314link) on CodePen.
メニュー・サブメニューを右側に配置した2カラムレイアウトサンプル
See the Pen yQYPMe by 健康 美容 賢脳の話題 (@89314link) on CodePen.
ブログ型サムネイルレイアウトパーツのサンプル
See the Pen qQOLpv by 健康 美容 賢脳の話題 (@89314link) on CodePen.