Columns

kernl-ui/src/styles/03.structure/columns.scss

Note: Shading for illustation of example grid only. Column components are without background color until explicitly styled with classes.

Equal-width five-column grid

w--20@t
w--20@t
w--20@t
w--20@t
w--20@t

Unequal-width two-column grid

w--1/3@t
w--2/3@t
<!-- 5 equal columns -->
<div class="row">
  <div class="col w--20@t">
    ...
  </div>
  <div class="col w--20@t">
    ...
  </div>
  <div class="col w--20@t">
    ...
  </div>
  <div class="col w--20@t">
    ...
  </div>
  <div class="col w--20@t">
    ...
  </div>
</div>

<!-- 2 unequal columns -->
<div class="row">
  <div class="col w--1/3@t">
    ...
  </div>
  <div class="col w--2/3@t">
    ...
  </div>
</div>

See more examples →