SimpleGrid

Equal columns that reflow on their own, with no breakpoints.

import { ... } from '@corndev/ui'

Petstore

Orders

Billing

Inventory

Users

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-simple-grid" data-gap="md" style="--corn-simple-grid-min: 16rem"></div>

Classes

Class
`.corn-simple-grid`

Attributes

Attribute	Values
`data-gap`	`xs\|sm\|md\|lg\|xl`
`data-cols`	`present or absent`

Vanilla JS

Optional. createSimpleGrid only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createSimpleGrid } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createSimpleGrid(el, { /* options */ });

Options

Option	Type	Default	Description
`gap`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`	Space between items.
`minItemWidth`	`string`	`undefined`	The narrowest an item may be before the grid drops a column, as a CSS length. Defaults to 16rem. This is what makes it responsive without breakpoints — and it measures the container, so it behaves the same in a sidebar as on a page.
`cols`	`number`	`undefined`	A fixed column count instead, for the cases where reflowing is wrong. Collapses to one column under 640px.

React

SimpleGrid — from @corndev/ui-react.

Props

Prop	Type	Default	Description
`gap`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`	Space between items.
`minItemWidth`	`string`	`undefined`	The narrowest an item may be before a column is dropped, as a CSS length. Defaults to 16rem.
`cols`	`number`	`undefined`	A fixed column count instead, for when reflowing is wrong. Collapses to one column under 640px.
`as`	`string\|React.ComponentType`	`'div'`	Element or component to render as.
`className`	`string`	`undefined`	Merged with the Corn UI classes.
`children`	`React.ReactNode`	`undefined`

Grid is the twelve-column layout system: you say how many columns there are and what spans what. This is the other case — as many equal columns as fit — and it needs no breakpoints at all.

import { SimpleGrid } from '@corndev/ui-react';
import '@corndev/ui/theme';

<SimpleGrid minItemWidth="16rem">
  {servers.map(server => <ServerCard key={server.url} {...server} />)}
</SimpleGrid>

minItemWidth is the narrowest an item may be before a column is dropped. The count follows from it.

Why there are no breakpoints

The column count responds to the container, not the viewport. A grid in a sidebar shows one column while the same grid on the page shows four, with no media query and nothing to declare per screen size — and it keeps working when the sidebar is resized, which a viewport breakpoint cannot do.

A fixed count

When reflowing is wrong — two panels that belong side by side — say so:

<SimpleGrid cols={2}>…</SimpleGrid>

That still collapses to one column under 640px, because a fixed count has to survive a phone.

Vanilla

<div class="corn-simple-grid" data-gap="md" style="--corn-simple-grid-min: 16rem">…</div>

import { createSimpleGrid } from '@corndev/ui';

createSimpleGrid(document.querySelector('#cards'), { minItemWidth: '16rem' });