Cols

Cols create equally sized columns to render HTML. This component is equivalent to an horizontal flex where every item has the same size.

To create a cols, use the following code:

<div class="GenshiCols">
  <div>Node</div>
  <div>Node</div>
  <div>Node</div>
  <div>Node</div>
</div>
1
2
3
4
5
6

Gap size

Use an additional modifier to configure the size of the gap:

  • Gap-less (no gap): GenshiCols--gapless
  • Compact (0.5rem): GenshiCols--compact
  • Cozy (1.5rem): GenshiCols--cozy
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6