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.<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>
To add a nested grid (grid within a grid,) use the following markup
<div class="uk-grid" data-uk-grid-margin> <div class="uk-grid" data-uk-grid-margin> ... </div> </div>