Steps to create UIkit grid system-
Add the uk-grid attribute to the grid container and place all the child elements i.e <div> inside it.
By default, all the grid cells are stacked so to place the child element side by side add .uk-child-width-expand class to the grid container base class.
Let us take an example in which child elements are stacked.
Source Code
<div uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
</div>
Source Code : Output
The above source code result will be:
Let us take an example in which child elements are placed side by side.
Source Code
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">Item</div>
</div>
</div>
Source Code : Output
The above source code result will be:
It refers to the gap that exists between the child element. UIkit provides different gap modifier classes that are
.uk-grid-small: It is used to a create small gap..uk-grid-medium: It is used to create a medium gap like the default one, but without a breakpoint..uk-grid-large: It is used to create a large gap with breakpoints..uk-grid-collapse: It is used to remove the gap entirely.It is used to apply different gaps inside the column or row. Add one of the following classes to the grid container base class.
| Class | Description |
|---|---|
.uk-grid-column-small |
: It is used to create a small gap to the column or row. |
.uk-grid-column-medium |
:It is used to create medium gap to the column or row. |
.uk-grid-column-large |
: It is used to create a large gap to the column or row. |
.uk-grid-row-collapse |
: It is used to remove the grid-gap entirely from the column or row. |
You can easily make a complex layout with the help of the nested grid concept. To understand it properly, let us take an example.
General Syntax
<div uk-grid>
<div>
<div uk-grid>
<div></div>
<div></div>
</div>
</div>
<div>
<div uk-grid>
<div></div>
<div></div>
</div>
</div>
</div>
You have to add .uk-grid-divider class to the grid container base class. It is used to separate the grid cells with lines.
