# Grid (/components/layout/grid)
`Grid` lays out direct children in a fixed number of equal columns. Use it when you know how many
columns the layout should have. Read [Layout](/docs/layout#choose-a-layout-component) to choose a
layout component.
Prefer [AutoGrid](/components/layout/auto-grid) when columns should grow from a minimum inline size
instead of an explicit count.
apps/docs/src/examples/grid/basic.tsx
```tsx
import { Grid } from '@luke-ui/react/grid';
import { ExampleItem } from '#docs';
export default () => {
return (
First grid item
Second grid item
Third grid item
Fourth grid item
);
};
```
## Spanning columns [#spanning-columns]
Child placement belongs to the child. Use Box grid-placement props such as `gridColumn` when an item
should span more than one track. `Grid` itself does not expose a span API.
apps/docs/src/examples/grid/spanning.tsx
```tsx
import { Grid } from '@luke-ui/react/grid';
import { ExampleItem } from '#docs';
export default () => {
return (
Spans two columns
Second grid item
Third grid item
Fourth grid item
);
};
```
## Responsive columns and spans [#responsive-columns-and-spans]
`columns` accepts a responsive object with a required `initial` value. Child spans must fit the
active explicit column count at every responsive condition. A span that is valid at `bp768` can
overflow the `initial` column count if those values are not kept in sync.
apps/docs/src/examples/grid/responsive.tsx
```tsx
import { Grid } from '@luke-ui/react/grid';
import { ExampleItem } from '#docs';
export default () => {
return (
Spans two columns initially, three from bp768
Second grid item
Third grid item
Fourth grid item
);
};
```
## Choose the rendered element [#choose-the-rendered-element]
Grid uses
[Box's `elementType` and `render` contract](/components/layout/box#choose-the-rendered-element).
apps/docs/src/examples/grid/semantic-element.tsx
```tsx
import { Grid } from '@luke-ui/react/grid';
import { ExampleItem } from '#docs';
export default () => {
return (
First list item
Second list item
Third list item
Fourth list item
);
};
```
## API [#api]