コニファ・ロゴ

csstest:CSS 12分割のカラムグリッドレイアウトの確認用サンプル

CSS 12分割のカラムグリッドレイアウトの確認用サンプルです。各カラムに表示しているテキストは、そのカラムのクラス名です。「col-s-」に続く数字がそのカラムの幅(数字×1/12)を現していますので、この数字が合計で12になるようにカラム要素(この場合div)を組むときれいに収まります。

Column Grid

col-s-12
col-s-1
col-s-11
.col-s-2
col-s-10
col-s-3
col-s-9
col-s-4
col-s-8
col-s-5
col-1-7
col-s-6
col-s-6
col-1-7
.col-s-5
col-s-8
col-s-4
col-s-9
col-s-3
col-s-10
.col-s-2
col-s-11
col-s-1
col-s-12
col-s-2
col-s-8
col-s-2
col-s-3
col-s-6
col-s-3
col-s-4
col-s-4
col-s-4
col-s-2
col-s-2
col-s-8
col-s-3
col-s-3
col-s-6
col-s-2
col-s-3
col-s-7
col-s-3
col-s-4
col-s-5
col-s-4
col-s-5
col-s-3
col-s-5
col-s-6
col-s-1
col-s-2
col-s-7
col-s-3
col-s-2
col-s-5
col-s-5
col-s-2
col-s-4
col-s-4
col-s-2
col-s-2
col-s-3
col-s-3
col-s-2
col-s-2

 

戻るボタン