Grid

The Grid component is a CSS Grid wrapper. It goes very well together with the Column component, which allows to set column widths in a very comfortable way. Any other element within the Grid component can be used as well though.

Columns

<k-grid>

  <!-- first row -->
  <k-column width="1/2">...</k-column>
  <k-column width="1/2">...</k-column>

  <!-- second row -->
  <k-column width="1/4">...</k-column>
  <k-column width="1/4">...</k-column>
  <k-column width="1/4">...</k-column>
  <k-column width="1/4">...</k-column>

</k-grid>

Check out the Column component docs for all available column widths.

Gutters

The grid does not have any gutter by default, but you can pass the following gutter sizes to control spacing between columns:

• small
• medium
• large
• huge

<k-grid gutter="medium">...</k-grid>

Layout anything

The Grid component can be used with any child element. By default each element has a width of 1/12. You can either control the width of each element with the grid-column-start CSS property, or you can change the number of columns of the grid.

Individual grid-column-start

<template>
  <k-grid>
    <div class="large-column"></div>
    <div class="narrow-column"></div>
  </k-grid>
</template>

<style>
.large-column {
  grid-column-start: span 8;
}
.narrow-column {
  grid-column-start: span 4;
}
</style>

Custom column count

With some CSS variable magic, the Grid component can change its number of columns

<k-grid style="--columns: 2">
  <div>...</div>
  <div>...</div>
</k-grid>

CSS class

.k-grid