ブラウザウインドウにあわせてコンテンツが可変する可変グリッドレイアウト（リキッドレイアウトやフレキシブルレイアウト、海外ではFluid Grid Layout）と呼ぶそうです。

以前はFlashで作成するサイトが得意とする表現でしたがJavascriptでできるようになったことから数年前にいろいろなサイトに使われていましたよね。

ウインドウ全体に広がるのはインパクトあるので写真中心系のサイトは見栄えがよくなりますが、テキストが入るコンテンツは若干読みにくくなりますので、用途に合わせて使い分ける形がよいですね。

この可変レイアウトですが、ブラウザ全体に可変する場合と一定の幅を最大としてそれ以下の場合に可変するサイトがあります。サイズを固定してウインドウサイズによってカラムを切り替えるというのはCSS3のMedia Queries（メディアクエリ）の考え方と同じですよね。

今回は「国内」「海外」サイトと「Wordpressのテーマ」を集めてみました。

可変グリッドのレイアウトの作成にはjQueryベースのカスタマイズもたくさんでているので、すぐに作れますので興味のある方は参考のサイトを見て好みのレイアウトを見つけてみてください。

国内サイト

Pen Online

http://www.pen-online.jp/

アマナ

http://amana.jp/

Mondo Alfa

http://mondo.alfaromeo-jp.com/

かみぐ – かみの工作所直営店

http://www.kamigu.jp/

Hellomag

http://www.hellomag.jp/

OUWN

http://ouwn.jp/

タイヨーエレック

http://www.taiyoelec.co.jp/company/

東京トヨペット

http://www.tokyo-toyopet.co.jp/

DRAFT

http://www.draft.jp/

Super me inc.

http://superme.jp/

高城浩之建築研究所

http://www.h-takagi.com/

フェイバリットリレー Favorite Relay

http://www.b-kobe.com/favorite/

Refsign Magazine Kyoto

http://blog.refsign.net/

CHECK IT OR KYOTO

http://www.checkitorgo.com/kyoto/

ARCPHILIA Inc.

http://www.arcphilia.co.jp/

CONDENSE

http://www.condense-c.com/

D&DEPARTMENT PROJECT

http://www.d-department.com/jp/

Publik:

http://publik.jp/

wanderlust hotel

http://wanderlusthotel.com/

日経電子版 広報部

http://pr.nikkei.com/

daily vitamins

http://dailyvitamin.jp/category/energy-kick/

twenty * twenty

http://www.20-20.jp/

Marble

http://www.marble-co.net/

quadro

http://rmd.quadro-web.com/

Concept Conception*

http://www.conceptconception.com/

ビルコム

http://www.bil.jp/

BLANK

http://www.blank.com.pt/

Shinya Inamura Design Studio

http://shinyainamura.com/

charary – キャラリー

http://www.charary.com/

YOU CHOOSE

http://youchoose.camelstudio.jp/

aModel casting

http://amodel.jp/

Tango Gameworks

http://tangogameworks.com/jp/

デザイン事務所 サガ

http://www.sagainc.co.jp/

週刊ウェブデザイン

http://www.dailywebdesign.com/

大阪人間科学大学

http://www.ohs.ac.jp/

三軒茶屋栄通り商店街

http://sancha.jp/

伊藤内科医院

http://ito-naika.net/

MONOMDEZ

http://monodez.com/

海外サイト

CreativeDepart

http://www.creativedepart.com/

Reform & Revolution

http://reformrevolution.com/

tomtor

http://www.tomtor.com/

This Also

http://thisalso.com/

Xpaider

http://xpaider.com/

WordPressテーマ

Grid Locker

http://gridlocker.dizenoco.com/

Liquid Magazin

http://themeforest.net/item/liquid-magazine-unique-fluid-grid-layout/full_screen_preview/60637

shaken-grid

http://demo.shakenandstirredweb.com/shaken-grid/

Shaken Grid (Lite)

http://shakenandstirredweb.com/themes/

FolioGrid

http://www.frogsthemes.com/themes/wordpress/foliogrid-pro/

MANSION

http://graphpaperpress.com/themes/mansion/

tanzaku

http://www.tripleships.com/works/tanzaku/

GRID WordPress

http://straightline.jp/36

Grid-A-Licious

http://cargocollective.com/suprb/#17924/Grid-A-Licious