グリッドレイアウト【grid rayout】グリッドデザイン / grid design / グリッドシステム / grid system

概要

グリッドレイアウト（grid rayout）とは、Webページなどのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせて内部の要素の大きさや配置を決定していく方式。特に、ページを方眼紙のように同じ大きさの微細な正方形に分割して領域の構成単位とする方式を指すことが多い。

見出しや文章、画像、余白など内部の構成要素の境界線が必ず格子状の線（グリッド線）に合うように配置する。様々な大きさの要素を複雑に配置してもすっきりした見やすい構成にすることができる。格子線はレイアウトの決定時に仮想的に引かれるもので、ページ上に実線として表示されるわけではない。

レイアウト時に任意の間隔でグリッド線を引き、これに沿うように要素を配置していく方式はもともと新聞や雑誌など印刷物のデザインでよく用いられてきた手法だが、Webページのグリッドレイアウトでは、8ピクセルや10ピクセルといった固定サイズの正方形で仮想的にページを分割し、これを任意に組み合わせて領域や余白を構成する手法が用いられることが多い。

(2022.5.14更新)