Elements

If you can dream it, you can do it

Column Blocks

Column grid is a robust layout that is both responsive and nestable. It can accomodate upto 10 columns by using pre-defined widths. The columns are fully responsive in all devices. The following table shows an overview of the classes sizes you can use to create columns:

Class Description
uk-width-1-1 Fills 100% of the available width.
uk-width-1-2 Divides the grid into halves.
uk-width-1-3 to uk-width-2-3 Divides the grid into thirds.
uk-width-1-4 to uk-width-3-4 Divides the grid into fourths.
uk-width-1-5 to uk-width-4-5 Divides the grid into fifths.
uk-width-1-6 to uk-width-5-6 Divides the grid into sixths.
uk-width-1-10 to uk-width-9-10 Divides the grid into tenths.
uk-grid uk-grid-width-1-4 Divides the elements of a grid into the number of columns specified using the uk-grid-width-* class. e.g. in this case the grid will be divided into four. You can also use 1, 2, 3, 4, 6 and 10.

Examples

One half

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One half

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One third

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One third

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One third

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One fourth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One fourth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One fourth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

One fourth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Two tenth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

five tenth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.

Three tenth

Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.

markup
<div class="uk-grid" data-uk-grid-margin>

  <div class="uk-width-medium-1-3">
    <p>your content here</p>
  </div>

  <div class="uk-width-medium-1-3">
    <p>your content here</p>
  </div>

  <div class="uk-width-medium-1-3">
    <p>your content here</p>
  </div>

</div>

<div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-3" data-uk-grid-margin>

  <div class="uk-block>
    <p>your content here</p>
  </div>

  <div class="uk-block>
    <p>your content here</p>
  </div>

  <div class="uk-block>
    <p>your content here</p>
  </div>

</div>

note

To add a nested grid (grid within a grid,) use the following markup

markup
<div class="uk-grid" data-uk-grid-margin>
  <div class="uk-grid" data-uk-grid-margin>
    ...
  </div>
</div>

demo