Grid System
Unkuna uses a flexible grid system that divides the width of the screen into 12 spaces, these spaces combine to form the widths of the columns.
The image shows all possible combinations for a column width.

Use
Copy the HTML snippet and keep in mind:
- The element with class nkn-row is the container for the column (s).
- Add inside the container (nkn-row) the columns that are needed, combining the class nkn-col- with the prefix of the screen size and the width of the column (explained in the table)..
Breakpoints Screen width Column prefix Column width Small Less than 767px nkn-col-s 1 al 12 Medium 768px to 991px nkn-col-m 1 al 12 Large 992px to 1199px nkn-col-l 1 al 12 Extra Large More than 1200px nkn-col-xl 1 al 12 - Build a column as follows:
nkn-col-s6 Where:
col: Column
s: Screen size
6: Number of spaces to form two columns
Example
To create two columns on a small screen (less than 768px) use: nkn-col-s6.
HTML Snippet
Filled grid
This system has a 0.5rem fill on all sides of the column.
Use
Copy the HTML snippet and keep in mind:
- The element with the class nkn-row-padding is the row that will contain padded columns.
- Add the necessary columns to the row.
Example
HTML Snippet
Offset
Allows you to shift the column to the left within the nkn-row or nkn-row-paddingcontainer.
Use
Copy the HTML snippet and keep in mind:
- The element with class nkn-row is the container for the offset column (s).
- You define the number of columns; to offset a column you use the class nkn-offset- combined with the prefix of the screen size and the width of the column (explained in the table).
Breakpoints Screen width Offset prefix Column width Small Less than 767px nkn-offset-s 1 al 12 Medium 768px to 991px nkn-offset-m 1 al 12 Large 992px to 1199px nkn-offset-l 1 al 12 Extra Large Greater than 1200px nkn-offset-xl 1 al 12 - Build the column offset like this:
nkn-col-s6 nkn-offset-s3 Where:
nkn-col-s6:
offset: column: offset
s: Screen size
3: Number of spaces to moveResult
offsetnkn-col-s6
Example
Shift column three spaces
HTML Snippet
More examples
Example 1
To create a column on a small screen, two columns on a medium screen onwards use:
nkn-col-s12 nkn-col-m6
Example 2
To create a small screen column, 2 medium screen columns, three large screen columns and 4 extra large screen columns use the class:
nkn-col-s12 nkn-col-m6 nkn-col-l4 nkn-col-xl3
Example 3
To center 2 columns on medium screens onwards, move 1 space in the first column and move 2 spaces in the second column use:
nkn-col-m4 nkn-offset-m1