to top

Mon - Fri 8:30 am to 5:00 pm

Talk to us (800) 909 902

Elements

Nothing can be done without hope

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>

Stay in touch with the latest news

We'd like to send you our latest news.

Truford Pro

Truford Pro
Mirage Plaza, Waiyaki Way
Nairobi, Kenya
+254 (800) 909 902
+254 (800) 909 901
info@truford.pro

Partners

We are passionate about what we do. Here are our accolades.

Partners