Tutorialsplane

UIkit Grid


UIkit Grid UIkit provides classes to create responsive, fluid and nested grid container. Here in this tutorial, we are going to explain how to create grid containers in UIkit. You can also use our online editor to edit and run the code online.


UIkit Grid Example

To create grid container, add attribute .uk-grid to div and add child div. You don’t need to add class to create class. Let us create a simple grid.

UIkit Grid Example:

<div uk-grid="">
    <div>Column 1</div>
    <div>Column 2</div>
    <div>Column 3</div>
</div>

Try it »

If you run the above example it will produce the following output-

Gutter Modifiers

Example

Gutter Modifier Example:

<div class="uk-grid-small 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>

Try it »

Divider Modifier

Add .uk-grid-divider class to separate the grid cells.

Divider Modifier Example:

<div class="uk-grid-divider uk-child-width-expand@s" uk-grid="">
<div>Dummy Text., Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text</div>
<div>Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text.</div>
<div>Dummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy TextDummy Text.</div>
</div>

Try it »

Match Height

Add class .uk-grid-match to make each cell height same.

Make Grid Cell Height Same Example:

<div class="uk-grid-match 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<br/></div>
</div>
<div>
	<div class="uk-card uk-card-default uk-card-body">Item Line 1<br/>Line 2<br/>Line 3</div>
</div>
</div>

Try it »

If you run the above example it will produce the output something like this-

Match Only One Cell

Add class .uk-grid-item-match to the grid whose child you want to make same.

<div uk-grid="">
    <div class="uk-grid-item-match"></div>
    <div></div>
</div>

Grid And Width

You can use width component to add the width of UIkit grid. Here is an example-

<div uk-grid="">
    <div class="uk-width-auto@m"></div>
    <div class="uk-width-1-3@m"></div>
    <div class="uk-width-expand@m"></div>
</div>

Uikit Tutorial

Component