Skip to content

Kirby 3.9.8

Search
    Search by Algolia

    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