Skip to content

Kirby 3.5.7.1

Column

<k-column>

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:

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

Available widths

  • 1/6
  • 1/4
  • 1/3
  • 1/2
  • 2/3
  • 3/4
  • 5/6
  • 1/1

Aliases

1/1

  • 2/2
  • 3/3
  • 4/4
  • 6/6

1/2

  • 2/4
  • 3/6

1/3

  • 2/6

2/3

  • 4/6

CSS class

.k-column