[heading size=”h2″ style=”uk-module-title”]Column Blocks[/heading]
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 shortcode sizes you can use to create columns:
| Class | Description |
|---|---|
[column size="1-1"] |
Fills 100% of the available width. |
[column size="1-2"] |
Divides the grid into halves. |
[column size="1-3"] to [column size="2-3"] |
Divides the grid into thirds. |
[column size="1-4"] to [column size="3-4"] |
Divides the grid into fourths. |
[column size="1-5"] to [column size="4-5"] |
Divides the grid into fifths. |
[column size="1-6"] to [column size="5-6"] |
Divides the grid into sixths. |
[column size="1-10"] to [column size="9-10"] |
Divides the grid into tenths. |
[grid_column size="4"] |
Divides the elements of a grid into the number of columns specified in the size attribute. e.g. in this case the grid will be divided into four. Options for the size attribute are 1, 2, 3, 4, 6 and 10. |
[line_break/] [heading size=”h3″ style=”uk-module-title uk-margin-top”]Examples[/heading] [child_grid] [column size=”1-2″] [heading size=”h3″ style=”uk-module-title”]One half[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [column size=”1-2″] [heading size=”h3″ style=”uk-module-title”]One half[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [/child_grid] [child_grid] [column size=”1-3″] [heading size=”h3″ style=”uk-module-title”]One third[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [column size=”1-3″] [heading size=”h3″ style=”uk-module-title”]One third[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [column size=”1-3″] [heading size=”h3″ style=”uk-module-title”]One third[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [/child_grid] [child_grid] [column size=”1-4″] [heading size=”h3″ style=”uk-module-title”]One fourth[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [column size=”1-4″] [heading size=”h3″ style=”uk-module-title”]One fourth[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [column size=”1-4″] [heading size=”h3″ style=”uk-module-title”]One fourth[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [column size=”1-4″] [heading size=”h3″ style=”uk-module-title”]One fourth[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. [/column] [/child_grid] [child_grid] [column size=”2-10″] [heading size=”h3″ style=”uk-module-title”]Two tenth[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. [/column] [column size=”5-10″] [heading size=”h3″ style=”uk-module-title”]five tenth[/heading] 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. [/column] [column size=”3-10″] [heading size=”h3″ style=”uk-module-title”]Three tenth[/heading] Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores. [/column] [/child_grid] [line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][grid] [column size=”1-3″] your content here [/column] [column size=”1-3″] your content here [/column] [column size=”1-3″] your content here [/column] [/grid] [/code] [line_break/] [code][grid_column size=”3″] [block style=””] your content here [/block] [block style=””] your content here [/block] [block style=””] your content here [/block] [/grid_column] [/code] [line_break/]
To add a nested grid (grid within a grid,) use the [child_grid] shortcode
[badge style=”note uk-margin-top”]markup[/badge]
[code][grid] [child_grid] … [/child_grid] [/grid][/code] [line_break/]
To create a multi-column paragraph, use the [paragraph_column] shortcode [line_break/] [paragraph_column size=”2″] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum cum natoque penatibus et magnis dis. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum cum natoque penatibus duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur [/paragraph_column] [line_break/] [badge style=”note uk-margin-top”]markup[/badge] [code][paragraph_column size=”2″] Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum cum natoque penatibus et magnis dis. [/paragraph_column][/code]
