Grid is an alternative to Box whenever we want to use CSS Grid Layout instead.


Property Value Description
as (React Component) The component it renders to. (default: div)
extend (Style Object) Extends the Fela style object
style (Style Object) Inline styles
className (string) Custom CSS classes
gap (length) CSS grid-gap property
columns grid-template-columns CSS grid-template-columns property
rows grid-template-rows CSS grid-template-rows property


  display: grid;
  box-sizing: border-box;
  grid-gap: 0


The gap prop acts as multiples of an optional baselineGrid that can be passed with a theme.
It defaults to 1 and thus works without a theme as well.


import { Grid, Box } from 'kilvin'

const Centered = () => (
  <Grid gap={2} columns={['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)']}>
    <Box height={100} extend={{ backgroundColor: 'red' }}>
      Cell 1
    <Box height={100} extend={{ backgroundColor: 'blue' }}>
      Cell 2
    <Box height={100} extend={{ backgroundColor: 'green' }}>
      Cell 3

results matching ""

    No results matching ""