Elements - Sandal

English

- 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>

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### 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