「CSS」カテゴリーアーカイブ

css columnsでのカラムレイアウト

CSS3の新機能として、columnsというカラムレイアウトを手軽に実現できるプロパティがある。

実際使ってみたサンプルはこちら。
http://hai3.net/dev/column.html

たしかに簡単にカラムレイアウトが作れる。がしかし、カスタマイズ制に乏しいのでどうなんだろう。

cssで指定できるものはいくつかあるけれど。

1
2
3
4
5
6
.class{
  column-count: 3;
  column-width: 100px;
  column-gap: 50px;
  column-rule: 1px dashed #ccc;
}

column-countで何段にするかどうかを設定する。
column-widthはカラムの横幅
column-grapはカラム同士のスペース
column-ruleは区切り線のスタイル