Grid

A flexible grid layout component based on CSS Grid, supporting responsive breakpoints, column/row spans, auto-flow, and advanced alignment. Includes helper subcomponents for common grid patterns.

---

Import

import { Grid } from '@odyssee/components';
// Helpers (optional)
import { SimpleGrid, ResponsiveGrid } from '@odyssee/components';

---

Basic Usage

Code Éditable

Résultat

---

Responsive Columns

Code Éditable

Résultat

---

Grid with Spanning Items

Code Éditable

Résultat

Full Width Span

Code Éditable

Résultat

---

Grid with Rows

Grid with Rows and Row Spans

Code Éditable

Résultat

---

Grid with Auto Flow

Code Éditable

Résultat

---

Helper Components

SimpleGrid

Code Éditable

Résultat

ResponsiveGrid

Code Éditable

Résultat

---

Alignment

Code Éditable

Résultat

Image Gallery

Code Éditable

Résultat

Props

Grid Props

Name	Type	Default	Description
children	Pulse.JSX.Element | Pulse.JSX.Element[] | string	—	Content to render inside the grid
cols	number |	—	Number of columns (can be responsive object or number)
rows	number |	—	Number of rows (can be responsive object or number)
gap	number | string	—	Gap between grid items
gapX	number | string	—	Gap between columns
gapY	number | string	—	Gap between rows
autoFlow	'row' | 'col' | 'dense' | 'row-dense' | 'col-dense'	—	Grid auto flow direction
alignItems	'start' | 'center' | 'end' | 'stretch' | 'baseline'	—	Align items vertically
justifyItems	'start' | 'center' | 'end' | 'stretch'	—	Align items horizontally
alignContent	'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'	—	Align content vertically
justifyContent	'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'	—	Align content horizontally
autoColumns	'auto' | 'min' | 'max' | 'fr'	—	Auto columns sizing
autoRows	'auto' | 'min' | 'max' | 'fr'	—	Auto rows sizing
className	string	—	Additional CSS classes
id	string	auto	DOM id (auto-generated if not provided)
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <div>

Grid.Item Props

Name	Type	Default	Description
children	Pulse.JSX.Element | Pulse.JSX.Element[] | string	—	Content to render inside the grid item
colSpan	number | 'full' | 'auto'	—	Number of columns to span
rowSpan	number | 'full' | 'auto'	—	Number of rows to span
colStart	number | 'auto'	—	Column start position
colEnd	number | 'auto'	—	Column end position
rowStart	number | 'auto'	—	Row start position
rowEnd	number | 'auto'	—	Row end position
alignSelf	'auto' | 'start' | 'center' | 'end' | 'stretch'	—	Align this item vertically
justifySelf	'auto' | 'start' | 'center' | 'end' | 'stretch'	—	Align this item horizontally
placeSelf	'auto' | 'start' | 'center' | 'end' | 'stretch'	—	Shorthand for alignSelf and justifySelf
className	string	—	Additional CSS classes
id	string	—	DOM id
style	string	—	Inline styles
...rest	any	—	Other props are spread to the root <div>

SimpleGrid Props

All Grid props except cols, plus:

Name	Type	Default	Description
columns	number	1	Number of columns
minChildWidth	string	—	Minimum column width (auto-fit if provided)

---

Accessibility

• Renders a semantic <div> container with CSS Grid layout.
• Content order is preserved for screen readers.
• Use semantic HTML (headings, lists, etc.) inside grid items for best accessibility.
• Avoid using grid for content that must be read strictly left-to-right, top-to-bottom.

---

Best Practices

• Use responsive cols for layouts that adapt to screen size.
• Use Grid.Item for advanced spanning and alignment.
• Prefer gap, gapX, and gapY for consistent spacing.
• Use SimpleGrid for equal-width columns with a minimum width.
• Use className and utility classes to style grid items (background, padding, rounded, etc.) as shown in playground examples.
• Test grid layouts on all breakpoints for responsiveness.

---

Subcomponents & Helpers

• Grid.Item: For advanced grid item placement and spanning.
• SimpleGrid: Grid with equal columns or minimum child width.
• ResponsiveGrid: Grid with predefined responsive breakpoints.

---