Skip to content

Kirby 3.9.8

Column

<k-column>

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 Column component can be used within a Grid component to layout elements in a very convenient way. The Grid is based on 12 columns by default and each column can change its width with the width property:

Props

Prop Type Default Description
sticky
boolean
Whether the column should stick to the window edge when scrolling
width
string
Supported values:
1/6, 1/4, 1/3, 1/2, 2/3, 3/4, 5/6, 1/1
Width of the column in the grid

Slots

Slot Description
default

Example

<k-grid>
  <k-column width="1/2"></k-column>
  <k-column width="1/4"></k-column>
  <k-column width="1/4"></k-column>
</k-grid>

The grid takes care of the responsiveness of the elements and also of wrapping lines automatically.

CSS classes

.k-column