UIkit Grid

UIkit Grid

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.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Item
Item
Item

Let us take an example in which child elements are placed side by side.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

The above source code result will be:

Item
Item
Item

Grid Gap Modifier

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.

Grid: Small Gap

General Syntax

Try it now

Grid: Medium Gap

General Syntax

Try it now

UIkit Grid: Large Gap

General Syntax

Try it now

UIkit Grid : Gap Collapse

General Syntax

Try it now

Column and Row

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.

General Syntax

Try it now

Nested grid

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

Try it now

Divider modifier

You have to add .uk-grid-divider class to the grid container base class. It is used to separate the grid cells with lines.

General Syntax

Try it now