Grid system

Quick example

Element
col-sm-7 col-lg-4
col-sm-5 col-lg-8
col-auto
col-auto
col-xs-4
col-xs-2
col-6
col-6
Source
<div class="zui-grid">
	<div class="col-sm-7 col-lg-4">[[Content]]</div>
	<div class="col-sm-5 col-lg-8">[[Content]]</div>
	<div class="col-auto">[[Content]]</div>
	<div class="col-auto">[[Content]]</div>
	<div class="col-xs-4">[[Content]]</div>
	<div class="col-xs-2">[[Content]]</div>
	<div class="col-6">[[Content]]</div>
	<div class="col-6">[[Content]]</div>
</div>

Breakpoints

Screen size Any Extra small Small Medium Large
Keyword none xs sm md lg
Width 0px + 481px + 769px + 981px + 1201px +

Grid classes

Important: Add after grid- prefix one of the following keywords to target different screen sizes: xs, sm, md, lg. For example to target devices with a screen size larger than 768px, this becomes grid-sm-

Note: In the following table, {?} represents a number from 1 to 12.

Refresh

Class
Description
zui-grid
Defines a new grid container that will be the parent for columns.
grid-{?}-columns
Defines the number of columns for a container. That way you dont have to define the size for each column.
Note: The columns must use only the class col.

Example:
grid-2-columns grid-sm-4-columns - display 4 columns on devices larger than 769px and 2 columns on devices with a screen size up to 768px.

grid-rtl
Display the columns in a reversed order(from right to left).
grid-ltr
Display the columns in a normal order(from left to right).
grid-nowrap
Specifies the columns display in a single line and do not allow to stack in multiple lines.
Note: By default the columns will wrap in multiple lines. So, this class may be handy if you don't want to.
grid-wrap
Specifies the columns display in a multiple lines.
Note: By default the columns will wrap in multiple lines. So, this class may be used only if you have have applied grid-nowrap class.
grid-left
grid-center
grid-right
Align the columns to left, center or right.
grid-top
grid-middle
grid-bottom
Align the columns to top, middle or bottom.
grid-collapse
Collapse the columns of a grid by removing the space between them.
grid-small
Make the space between columns smaller.
grid-large
Make the space between columns larger.
grid-normal
Make the space between columns normal as it should be by default. Usefull to reset back if has been modifed.
grid-hide
Hide the grid with all its contents.
grid-show
Make a hidden grid visible again.
grid-as-table
As the name suggests, this will make the grid to to display like a table.

Column classes

The columns are direct childs of a grid container. But, they will become real grid columns only after adding a class that has col- prefix or in some cases only the class col is required.

Important: Add after the prefix col- one of the following keywords to target different screen sizes: xs, sm, md, lg. For example to target devices with a screen size larger than 768px, this becomes col-sm-

Note: In the following table, {?} represents a number from 1 to 12.

Refresh

Class
Description
col-{?}
The main class of a single column.
col
In some cases only a single col should be used. This is when the grid container defines the total number of columns using a class like grid-{?}-columns
col-top
col-middle
col-bottom
Align a single column to top, middle or bottom
col-auto
Automatically determine the column width. It will always try to fill all the remaining space from a grid container.
flex
By default the column display as a flex item. Add flex to make it a flex container.
Note: Don't use this to create direct nested grid columns, instead add zui-grid class.
col-hide
Hide a column.
Note: Ignore the misleading col- prefix. This class may be applied to any element from a grid container, not only the columns.
col-show
Show a column.
Note: Ignore the misleading col- prefix. This class may be applied to any element from a grid container, not only the columns.
zui-grid
Just for reference. Make the column a grid container.

Horizontal align

Use grid-left, grid-center or grid-right to align the columns horizontaly.

Element
col-3
col-4
col-3
col-4
col-3
col-4
Source
<div class="zui-grid grid-left">
	<div class="col-3">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
</div>
<div class="zui-grid grid-center">
	<div class="col-3">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
</div>
<div class="zui-grid grid-right">
	<div class="col-3">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
</div>

Vertical align

Use grid-top, grid-middle or grid-bottom to align the columns vertically.

Element






















Source
<div class="zui-grid grid-top">
	<div class="col-4">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
</div>
<div class="zui-grid grid-middle">
	<div class="col-4">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
</div>
<div class="zui-grid grid-bottom">
	<div class="col-4">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
	<div class="col-4">[[Content]]</div>
</div>

Auto column width

Element
col-sm-auto
col-sm-6
col-sm-auto
col-sm-auto
col-sm-auto
col-sm-auto
col-sm-8
Source
<div class="zui-grid">
	<div class="col-sm-auto">[[Content]]</div>
	<div class="col-sm-6">[[Content]]</div>
	<div class="col-sm-auto">[[Content]]</div>
	<div class="col-sm-auto">[[Content]]</div>
</div>
<div class="zui-grid">
	<div class="col-sm-auto">[[Content]]</div>
	<div class="col-sm-auto">[[Content]]</div>
	<div class="col-sm-8">[[Content]]</div>
</div>

Reverse order

Reverse the order of columns.

Element
-1-
-2-
-3-
-4-
Source
<div class="zui-grid grid-sm-rtl">
	<div class="col-sm-2"> -1- </div>
	<div class="col-sm-3"> -2- </div>
	<div class="col-sm-4"> -3- </div>
	<div class="col-sm-3"> -4- </div>
</div>

Collapsed columns

Remove the margin between columns

Element
col-sm-2
col-sm-4
col-sm-6
Source
<div class="zui-grid grid-collapse">
	<div class="col-sm-2">[[Content]]</div>
	<div class="col-sm-4">[[Content]]</div>
	<div class="col-sm-6">[[Content]]</div>
</div>

Less space between columns

Element
col-sm-2
col-sm-4
col-sm-6
Source
<div class="zui-grid grid-small">
	<div class="col-sm-2">[[Content]]</div>
	<div class="col-sm-4">[[Content]]</div>
	<div class="col-sm-6">[[Content]]</div>
</div>

More space between columns

Element
col-sm-2
col-sm-4
col-sm-6
Source
<div class="zui-grid grid-large">
	<div class="col-sm-2">[[Content]]</div>
	<div class="col-sm-4">[[Content]]</div>
	<div class="col-sm-6">[[Content]]</div>
</div>

Nested grids

No problem, you can go deeper!

Element
col-sm-3
col-sm-5
col-sm-4
col-sm-6
col-sm-6
Source
<div class="zui-grid">
	<div class="col-sm-7">
		<div class="zui-grid">
			<div class="col-sm-3">[[Content]]</div>
			<div class="col-sm-5">[[Content]]</div>
			<div class="col-sm-4">[[Content]]</div>
		</div>
	</div>
	<div class="col-sm-5">
		<div class="zui-grid">
			<div class="col-sm-6">[[Content]]</div>
			<div class="col-sm-6">[[Content]]</div>
		</div>
	</div>
</div>

Individual vertical column align

Each column can self align on y axis.

Element
top
middle
bottom
middle
top
Source
<div class="zui-grid">
	<div class="col-sm-2 col-sm-top">[[Content]]</div>
	<div class="col-sm-2 col-sm-middle">[[Content]]</div>
	<div class="col-sm-2 col-sm-bottom">[[Content]]</div>
	<div class="col-sm-2 col-sm-middle">[[Content]]</div>
	<div class="col-sm-2 col-sm-top">[[Content]]</div>
</div>

Define a number of columns per grid

Sometimes it may be required to define a number of columns and forget. Here you go!

Element
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
Source
<div class="zui-grid grid-sm-5-columns">
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
	<div class="col">[[Content]]></div>
</div>

Thomas Campbell

Molestias odit magni non doloremque vel eaque magnam quod officiis velit consequuntur voluptatem sint dolorem harum, reprehenderit.