designFlonCSSv1.0.1

Utilities

Grid

/path/to/floncss/trumps/grid/grid.css

display: grid; を用いたカラムレイアウトを構築します。
12カラムのグリッドシステムを採用し、レスポンシブに対応させることで様々なレイアウトを構築することができます。
また、utility classの “gap” や “row-gap” と組み合わせることでカラム間ギャップを細かく設定することができます。

ClassPropertiesDescription
grid--column-gap: 0; display: grid; column-gap: var(--column-gap); row-gap: var(--row-gap, var(--column-gap));
grid-flow:rowgrid-auto-flow: row;
grid-flow:colgrid-auto-flow: column;
grid-flow:densegrid-auto-flow: dense;
grid-flow:row-densegrid-auto-flow: row dense;
grid-flow:col-densegrid-auto-flow: column dense;
grid-cols:1 grid-rows:1grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: repeat(1, minmax(0, 1fr));横/縦方向の1カラムレイアウトを構築します
grid-cols:2 grid-rows:2grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));横/縦方向の2カラムレイアウトを構築します
grid-cols:3 grid-rows:3grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));横/縦方向の3カラムレイアウトを構築します
grid-cols:4 grid-rows:4grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));横/縦方向の4カラムレイアウトを構築します
grid-cols:5 grid-rows:5grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr));横/縦方向の5カラムレイアウトを構築します
grid-cols:6 grid-rows:6grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr));横/縦方向の6カラムレイアウトを構築します
grid-cols:7 grid-rows:7grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr));横/縦方向の7カラムレイアウトを構築します
grid-cols:8 grid-rows:8grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr));横/縦方向の8カラムレイアウトを構築します
grid-cols:9 grid-rows:9grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr));横/縦方向の9カラムレイアウトを構築します
grid-cols:10 grid-rows:10grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr));横/縦方向の10カラムレイアウトを構築します
grid-cols:11 grid-rows:11grid-template-columns: repeat(11, minmax(0, 1fr)); grid-template-rows: repeat(11, minmax(0, 1fr));横/縦方向の11カラムレイアウトを構築します
grid-cols:12 grid-rows:12grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr));横/縦方向の12カラムレイアウトを構築します
grid-cols:none grid-rows:nonegrid-template-columns: none; grid-template-rows: none;

Useage

Columns

1
2
1<div class="grid grid-cols:2 gap">
2  <div>1</div>
3  ...
4</div>
1
2
3
4
1<div class="grid grid-cols:4 gap">
2  <div>1</div>
3  ...
4</div>
1
2
3
4
5
6
1<div class="grid grid-cols:2 grid-cols:3@md gap">
2  <div>1</div>
3  ...
4</div>

Rows

1
2
3
4
5
6
7
8
1<div class="grid grid-rows:3 grid-flow:col gap">
2  <div>1</div>
3  ...
4</div>
1
2
3
4
5
1<div class="grid grid-rows:3 grid-cols:4 grid-flow:col gap">
2  <div>1</div>
3  ...
4</div>