• 8:00 am to 10:00 pm

Talk to us now

+49 555 000 000

Visit our offices

Mirage Plaza - Hamburg

Send us an email

hello@sandal.com

We are open all day

8:00 am to 10:00 pm daily

Elements

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>

logo

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing

+49 555 000 000
hello@sandal.com
support@sandal.com

Recent Posts

Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes