Grid

Unkuna grid is a system based on 12 flexible columns to design responsive web layout based on first mobile, use media queries to adapt our grids to different contexts.

Example Open in new tab

one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
two out of twelve
two out of twelve
two out of twelve
two out of twelve
two out of twelve
two out of twelve
three out of twelve
three out of twelve
three out of twelve
three out of twelve
six out of twelve
six out of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
one of twelve
two out of twelve
two out of twelve
two out of twelve
two out of twelve
two out of twelve
two out of twelve
three out of twelve
three out of twelve
three out of twelve
three out of twelve
six out of twelve
six out of twelve

HTML Structure Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

Usage

The "classic" grid uses rows and float based columns. Each row grid is base 12, ie. the total row width is 12 columns. Column widths range from 1 to 12. A row may contain any combination of .nkn-col- columns, adding up to 12 total. Use nkn-row for columns with no padding, nkn-row-padding for columns with automatic default padding. Content may be centered on the screen by using a combination of nkn-offset- (essentially empty space) and nkn-col- class names.
To have columns in devices of all sizes we use the classes "nkn-col-s1" to "nkn-col-s12", to have a number of different columns in devices with size from 769px to 1023px the classes "nkn- col-m1" to "nkn-col-m12" and to have a different number of columns in devices with sizes greater than 1024px, classes "nkn-col-l1" through "nkn-col-l12" will be used.

CSS class names

Row
Class Description
"nkn-row" Grid row.
"nkn-row-padding" Grid row for columns with padding.
Column
Class Description
"nkn-col-s1","nkn-col-m1","nkn-col-l1" To have 1 column with a width of 1/12 parts of row width.
"nkn-col-s2","nkn-col-m2","nkn-col-l2" To have 1 column with a width of 2/12 parts of row width.
"nkn-col-s3","nkn-col-m3","nkn-col-l3" To have 1 column with a width of 3/12 parts of row width.
"nkn-col-s4","nkn-col-m4","nkn-col-l4" To have 1 column with a width of 4/12 parts of row width.
"nkn-col-s5","nkn-col-m5","nkn-col-l5" To have 1 column with a width of 5/12 parts of row width.
"nkn-col-s6","nkn-col-m6","nkn-col-l6" To have 1 column with a width of 6/12 parts of row width.
"nkn-col-s7","nkn-col-m7","nkn-col-l7" To have 1 column with a width of 7/12 parts of row width.
"nkn-col-s8","nkn-col-m8","nkn-col-l8" To have 1 column with a width of 8/12 parts of row width.
"nkn-col-s9","nkn-col-m9","nkn-col-l9" To have 1 column with a width of 9/12 parts of row width.
"nkn-col-s10","nkn-col-m10","nkn-col-l10" To have 1 column with a width of 10/12 parts of row width.
"nkn-col-s11","nkn-col-m11","nkn-col-l11" To have 1 column with a width of 11/12 parts of row width.
"nkn-col-s12","nkn-col-m12","nkn-col-l12" To have 1 column with a width of 12/12 parts of row width.
Column offset
Class Description
"nkn-offset-s1", "nkn-offset-m1", "nkn-offset-l1" To move the column 1/12 parts of row width.
"nkn-offset-s2", "nkn-offset-m2", "nkn-offset-l2" To move the column 2/12 parts of row width.
"nkn-offset-s3", "nkn-offset-m3", "nkn-offset-l3" To move the column 3/12 parts of row width.
"nkn-offset-s4", "nkn-offset-m4", "nkn-offset-l4" To move the column 4/12 parts of row width.
"nkn-offset-s5", "nkn-offset-m5", "nkn-offset-l5" To move the column 5/12 parts of row width.
"nkn-offset-s6", "nkn-offset-m6", "nkn-offset-l6" To move the column 6/12 parts of row width.
"nkn-offset-s7", "nkn-offset-m7", "nkn-offset-l7" To move the column 7/12 parts of row width.
"nkn-offset-s8", "nkn-offset-m8", "nkn-offset-l8" To move the column 8/12 parts of row width.
"nkn-offset-s9", "nkn-offset-m9", "nkn-offset-l9" To move the column 9/12 parts of row width.
"nkn-offset-s10", "nkn-offset-m10", "nkn-offset-l10" To move the column 10/12 parts of row width.
"nkn-offset-s11", "nkn-offset-m11", "nkn-offset-l11" To move the column 11/12 parts of row width.
"nkn-offset-s12", "nkn-offset-m12", "nkn-offset-l12" To move the column 12/12 parts of row width.