kss-node Styleguide

5 Grid

5.1 Grids

Grids can be used inside any container. If there is more item than fits one row, it will break into more rows.

.g-small

Small grid

.g-medium

Medium grid

.g-large

Large grid

<div class="{$modifiers} doc-visualize">
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
  <div class="g-item"></div>
</div>