LayoutLayout13 props
Grid
A CSS grid layout container for arranging children in rows and columns. Use Grid for card galleries, dashboards, and any multi-column layout. Supports fixed column counts and re...
공식 문서 열기Preview
One
Two
Three
Import
import {Grid} from '@astryxdesign/core/Grid';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
A CSS grid layout container for arranging children in rows and columns. Use Grid for card galleries, dashboards, and any multi-column layout. Supports fixed column counts and re...
gridcolumnsresponsiveauto-fillauto-fitmasonrytilesrow
Important props
columnsnumber | {minWidth: number, max?: number, repeat?: fill | fit}optional
Theming targets
astryx-gridastryx-grid-span
Best practices
- DoUse responsive columns for layouts that should adapt to screen size: `columns={{minWidth: 280}}`.
- DoCap the column count with `max` to prevent rows from getting too wide on large screens.
- DoUse `repeat: 'fill'` (the default) for consistent item widths. Use `'fit'` when items should stretch to fill leftover space.
- Do notWrite manual CSS grid; Grid handles spacing and responsive behavior for you.