Doghouse UiKit

4.1 #Grid.grid Flex Grid

Toggle example guides Toggle HTML markup

Create a grid (columns) from nested elements. You should define your own $duk-base-responsive-grids to change these.

Examples
Default styling
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
.duk-grid--2-col
2 column grid
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
.duk-grid--3-col
3 column grid
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
.duk-grid--4-col
4 column grid
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
.duk-grid--5-col
5 column grid
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Markup 
<div class="[modifier class]">
  <div><div class="duk-island--tertiary duk-mb--1">Grid Item</div></div>
  <div><div class="duk-island--tertiary duk-mb--1">Grid Item</div></div>
  <div><div class="duk-island--tertiary duk-mb--1">Grid Item</div></div>
  <div><div class="duk-island--tertiary duk-mb--1">Grid Item</div></div>
  <div><div class="duk-island--tertiary duk-mb--1">Grid Item</div></div>
  <div><div class="duk-island--tertiary duk-mb--1">Grid Item</div></div>
</div>
Source: scss/objects/_flex-grid.scss, line 4