Grid

<k-grid>

• kirby/panel/src/components/Layout/Grid.vue

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

The Grid component is a CSS Grid wrapper. It goes very well together with the <k-bolumn> 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.

Props

Prop	Type	Default	Description
gutter	string Supported values: small, medium, large, huge	–

Slots

Slot	Description
default

Example

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

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 classes

.k-grid