Columns

A flexible multi-column layout component for flowing content into multiple columns, similar to magazine or newspaper layouts. Supports responsive column counts, t-shirt width sizes, column gaps, rules (dividers), and helper subcomponents for advanced layouts.

---

Import

import { Columns } from '@odyssee/components';
// Helpers (optional)
import { TwoColumns, ThreeColumns, FourColumns, ResponsiveColumns } from '@odyssee/components';

---

Basic Usage

Code Éditable

Résultat

---

Responsive Columns

Code Éditable

Résultat

---

Column Width (T-shirt Sizes)

Code Éditable

Résultat

---

Column Gap

Code Éditable

Résultat

---

Column Rules (Dividers)

Code Éditable

Résultat

---

Subcomponents

Force a Column Break

Code Éditable

Résultat

Span Across All Columns

Code Éditable

Résultat

---

Helper Components

Code Éditable

Résultat

---

Props

Name	Type	Default	Description
children	Pulse.JSX.Element | Pulse.JSX.Element[] | string	—	Content to render inside columns
count	number | { base?, sm?, md?, lg?, xl?, "2xl"? }	—	Number of columns (can be responsive object)
width	"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" ...	—	Column width (t-shirt sizes)
gap	number | string	—	Gap between columns (pixels or CSS value)
rule	boolean	false	Show a divider (rule) between columns
ruleWidth	"thin" | "medium" | "thick" | number	—	Width of the column rule
ruleColor	string	—	Color of the column rule
ruleStyle	"solid" | "dashed" | "dotted" | "double"	"solid"	Style of the column rule
auto	boolean	false	Use CSS columns: auto for auto-fill columns
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>

Subcomponents

Columns.Break

Name	Type	Default	Description
className	string	—	Additional CSS classes
...rest	any	—	Other props for the <div>

Columns.Span

Name	Type	Default	Description
children	ReactNode	—	Content to span across columns
span	"all" | number	"all"	Number of columns to span, or "all" for full
className	string	—	Additional CSS classes
...rest	any	—	Other props for the <div>

---

Accessibility

• The Columns component renders a semantic <div> container.
• Content order is preserved for screen readers.
• Avoid using columns for content that must be read strictly left-to-right, top-to-bottom.
• Use headings and landmarks inside columns for better navigation.

---

Best Practices

• Use responsive count for layouts that adapt to screen size.
• Prefer Columns.Span for headings or elements that should span all columns.
• Use gap to control spacing between columns for readability.
• Use rule and related props for visual separation when needed.
• Avoid placing interactive elements (like forms) across column breaks for accessibility.

---

Subcomponents & Helpers

• Columns.Break: Forces a column break at its position.
• Columns.Span: Makes its children span all columns (or a specific number).
• TwoColumns, ThreeColumns, FourColumns, ResponsiveColumns: Quick helpers for common layouts.

---