CSSの横並びレイアウト

CSSによる折り返し可能な横並びレイアウトの様々な方法をご紹介します。

基準となるHTMLとCSSは次のコードです。

HTML

CSS

floatプロパティによる方法

  • ※ IE6以上対応
  • ※ 高さが合わない要素があると崩れて表示されることがある

CSS

アイテム間の余白はすべてのアイテムに上と左にmarginを取り、親要素に同じ値の負数（ネガティブマージン）を取っています。

display:inline-blockによる方法

  • ※ IE6以上対応（ただしIE6とIE7はハックで対応）

CSS

アイテム間の余白はすべてのアイテムに上と左にmarginを取り、親要素に同じ値の負数（ネガティブマージン）を取っています。

display:flexによる方法

  • ※ IE10以上対応

CSS

アイテム間の余白はカラムに合わせて必要な箇所のみに取っています。
上記コードの場合、2列目3列目だけに左にmarginを取り、2行目以降に上にmarginを取ります。

display:gridによる方法

  • ※ IE10対応
    （ただしgird-template-columnsやgird-template-columns、grid-gapに対応しないため行列の個数を固定して対応）

CSS

アイテム間の余白はgrid-gapプロパティで取ります。
ただし、IEはgrid-gapプロパティに対応していないため、grid-columns/grid-rowsで余白分のエリアを取って配置します。