HTMLとCSSでじゃばら並びのグリッドレイアウトを実装する方法

グリッドレイアウト並び順

複数の要素をグリッドレイアウトで並べたとき、じゃばら並び(1列目は左から右、2列目は右から左、3列目は左から右…のように並べる)にするためのHTML/CSSサンプルコードです。

結果イメージ

複数の要素の並び方を『1列目は左から右、2列目は右から左、3列目は左から右…のように並べる』ことができます。

Grid layout jabara

ソースコード

20行目の横幅(width)は、使いたい幅を指定して下さい。






1行あたり6個配置のサンプル






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Javascriptで、グリッドレイアウトを実装する時の参考に。

感謝!

いつもお世話になっている、@t_okuboさんに教えて頂きました。ありがとうございます!
PROTO-STAR.comにも、開発に役立つ技術情報がまとまっています。ぜひ御覧下さい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です