Grid

Create a fully responsive, fluid and nestable grid layout.

The Grid system allows you to arrange block elements in columns and works closely together with the UIkit Width component to determine how much space of the container each item will take up. It can also be combined with the UIkit Flex component to align and order grid items.

Usage

To init the grid container, use the vk-grid component. Add child <div> elements to create the cells. By default, all grid cells are stacked. To place them side by side, add one of the classes from the UIkit Width component. Using uk-child-width-expand will automatically apply equal width to items, regardless of how many there are.

<vk-grid>
  <div></div>
  <div></div>
</vk-grid>

Note Often cards from the Card component are used inside a grid. In the following examples as well for a better visualization.

Gutter modifiers

The Grid component comes with a default gutter, that is decreased automatically from a certain breakpoint, usually on a smaller desktop viewport width. To apply a different gutter, use the gutter prop with one of the following options.

<vk-grid gutter="small">...</vk-grid>

Nested grid

You can easily extend your grid layout with nested grids.

<vk-grid>
  <div>
    <vk-grid>
      <div></div>
      <div></div>
    </vk-grid>
  </div>
  <div>
    <vk-grid>
      <div></div>
      <div></div>
    </vk-grid>
  </div>
</vk-grid>

Divided modifier

Add the divided prop to separate grid cells with lines. This option can be combined with the gutter prop. As soon as the grid stacks, the divider lines will become horizontal.

<vk-grid divided>...</vk-grid>

Match height

To match the height of the direct child of each cell, set the matched prop. This is needed to match the height of cards from the Card component.

<vk-grid matched>...</vk-grid>

Match only one cell

You can also match the height of the direct child of just one cell. To do so, add the .uk-grid-item-match class to the grid item whose child you want to match.

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

Advanced

For a more specific selection of the elements whose heights should be matched, use the HeightMatch directive.

<vk-grid v-vk-height-match="{ target: '> div > .uk-card' }">
  <div>
    <vk-card></vk-card>
  </div>
  <div>
    <vk-card></vk-card>
  </div>
</vk-grid>

Grid and width

The grid is mostly used in combination with the UIkit Width component. This allows for great flexibility when determining the column widths.

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

Child width

If the grid columns are evenly split, you can add one of the .uk-child-width-* classes to the grid container, instead of adding a class to each of the items.

<vk-grid class="uk-child-width-1-2@s uk-child-width-1-3@m">...</vk-grid>

For more detailed information, take a look at the UIkit Width component.

Grid and flex

You can easily combine the grid with the UIkit Flex component. That way you can modify the items' alignment, ordering, direction and wrapping. This allows you, for example, to flip the cells' display order for wider viewports. All this works together with the gutter and divider modifiers.

<vk-grid class="uk-flex-center">
  <div></div>
  <div class="uk-flex-first"></div>
</vk-grid>

Props