Grid
<k-grid>
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 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