district base

8.2.1 #Templates.layout.grid-layout 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">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
  <div><div class="duk-island--tertiary">Grid Item</div></div>
</div>
Source: docroot/themes/contrib/district_base/styles/scss/objects/_grid.scss, line 4