【サンプルデモ】 HTML5でグリッドレイアウト

3カラム

grid3

横幅960pxの親要素の中に横幅280px(marginとpaddingがともに10pxなので実際は320px)grid3をフロート。

grid3

横幅960pxの親要素の中に横幅280px(marginとpaddingがともに10pxなので実際は320px)grid3をフロート。

grid3

横幅960pxの親要素の中に横幅280px(marginとpaddingがともに10pxなので実際は320px)grid3をフロート。

4カラム

grid2

横幅960pxの親要素の中に横幅200px(marginとpaddingがともに10pxなので実際は240px)grid2をフロート。

grid2

横幅960pxの親要素の中に横幅200px(marginとpaddingがともに10pxなので実際は240px)grid2をフロート。

grid2

横幅960pxの親要素の中に横幅200px(marginとpaddingがともに10pxなので実際は240px)grid2をフロート。

grid2

横幅960pxの親要素の中に横幅200px(marginとpaddingがともに10pxなので実際は240px)grid2をフロート。

2カラム

grid5

横幅960pxの親要素の中に横幅600px(marginとpaddingがともに10pxなので実際は640px)grid5と横幅320pxgrid3をフロート。

grid3

横幅960pxの親要素の中に横幅600px(marginとpaddingがともに10pxなので実際は640px)grid5と横幅320pxgrid3をフロート。

6カラム

grid1

横幅960pxの親要素の中に横幅120px(marginとpaddingがともに10pxなので実際は160px)grid1をフロート。

grid1

横幅960pxの親要素の中に横幅120px(marginとpaddingがともに10pxなので実際は160px)grid1をフロート。

grid1

横幅960pxの親要素の中に横幅120px(marginとpaddingがともに10pxなので実際は160px)grid1をフロート。

grid1

横幅960pxの親要素の中に横幅120px(marginとpaddingがともに10pxなので実際は160px)grid1をフロート。

grid1

横幅960pxの親要素の中に横幅120px(marginとpaddingがともに10pxなので実際は160px)grid1をフロート。

grid1

横幅960pxの親要素の中に横幅120px(marginとpaddingがともに10pxなので実際は160px)grid1をフロート。

2カラム

grid3

横幅960pxの親要素の中に横幅280px(marginとpaddingがともに10pxなので実際は320px)grid3をフロート。

grid5

横幅960pxの親要素の中に横幅600px(marginとpaddingがともに10pxなので実際は640px)grid5と横幅320pxgrid3をフロート。


2カラム

grid4

横幅960pxの親要素の中に横幅440px(marginとpaddingがともに10pxなので実際は480px)grid4をフロート。

grid4

横幅960pxの親要素の中に横幅440px(marginとpaddingがともに10pxなので実際は480px)grid4をフロート。

前のページにもどる