top
グリッドその1
グリッドその2
グリッドその2
グリッドその3
グリッドその4
グリッドその4
グリッドその4
グリッドその4
グリッドその5
グリッドその6
end
※空のコメント要素はinline-block時で改行の打消しで使用してる、inline-block以外の場合はコメントタグを削除しても良い。
===== PR =====
===== floatを使う =====
グリッドその1
グリッドその2
グリッドその2
グリッドその3
グリッドその4
グリッドその4
グリッドその4
グリッドその4
グリッドその5
グリッドその6
* 昔から使われている方法
* 折り返しが発生する場合は、gridに高さと幅を一定にしないと縦横共にズレてしまう。
* IE6はfloatで指定した方向のマージンが2倍になる不具合があるので注意が必要
* IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意
===== inline-block を使う =====
グリッドその1
グリッドその2
グリッドその2
グリッドその3
グリッドその4
グリッドその4
グリッドその4
グリッドその4
グリッドその5
グリッドその6
* 個人的には最も使う方法。
* 折り返しが発生する時はgridに幅を一定にしないと縦方向にズレが発生する。（※floatのように高さは一定にしなくても横方向は揃う）
* HTML作成時に改行を使用すると隙間が発生するので、上記の共通HTMLのように改行をコメント要素で打ち消したりfont-size:0;を使う必要があり、スマートさに欠ける。
* IE用にzoomを指定してるがIEに不具合があり、ol要素のリスト番号が1.2.3とならず1.1.1.となるので注意
* vertical-align:で中央揃えも可能
===== table-cell を使う =====
グリッドその1
グリッドその2
グリッドその2
グリッドその3
グリッドその4
グリッドその4
グリッドその4
グリッドその4
グリッドその5
グリッドその6
* 色々問題があるので使わない方が良い
* 折り返しが発生しないのでレスポンシブデザインには向かない。
* 内側ブロック(class=grid)にマージン設定ができない。