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.

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

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

Gutter Modifiers

• .uk-grid-small – Add this class to apply a small gutter.
• .uk-grid-medium– Add this class to apply a medium gutter like the default one, but without a breakpoint.
• .uk-grid-large– Add this class to apply a large gutter with breakpoints.
• .uk-grid-collapse– Add this class to remove the grid gutter entirely.

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>

Divider Modifier

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

<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>

Match Height

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

<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>

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>