Grid layout with a dynamic number of columns based on the current window width.

The grid will have:

  • 4 columns for small windows (width < 840px)
  • 8 columns for medium windows (840px <= width < 960px)
  • 12 columns for large windows (960px <= width)

Use with KGridItem, which accept "layout objects" as props. These layout objects can define values for span, alignment, or both.

For a grid with a fixed number of columns, see KFixedGrid and KFixedGridItem.


Name Description Type Default Required
The size of column gutters in pixels. If not provided, the gutter is set to 16px if either window dimension is less than 600px, and set to 24px otherwise.
number|string null
Show gridlines for debugging purposes
boolean false


Name Description
Children of a KFixedGrid must be KGridItem components