Live demo — this example is server-driven; run the showcase locally for the interactive version.

Grid

A 12-column responsive grid. Each child sets its span with pf-m-N-col (plus per-breakpoint variants like pf-m-6-col-on-md). Use Grid when columns need to be different widths.

Examples

Basic

Mixed spans — two 6-cols across the top, three 4-cols below. No gutter.

6 cols

4 cols

With gutter

<code class="ws-code">gutter=true</code> enables row and column gaps.

Spans

Visual reference for 1-col through 12-col widths. Spans add up to the 12-col grid.

12 — full row

Responsive spans

Per-breakpoint spans: 12 on mobile, 6 on md, 4 on lg. Resize the window to see it reflow.

Smart

pf-m-all-6-col-on-sm / pf-m-all-4-col-on-md size every item per breakpoint.

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

item 9

item 10

item 11

item 12

Smart with overrides

All-items sizing with per-item col overrides at breakpoints.

item 1

item 2

item 3

item 4

item 5

item 6

item 7

item 8

item 9

item 10

item 11

item 12

item 13

item 14

Nested

A grid nested inside a grid item, with its own spans.

12 col

10 col

6 col

4 col

8 col

2 col

Offsets

pf-m-offset-*-col pushes items right by whole columns.

11 col, offset 1

10 col, offset 2

9 col, offset 3

8 col, offset 4

Row spans

pf-m-*-row spans an item across grid rows.

8 col

4 col, 2 row

2 col, 3 row

2 col

4 col

2 col

4 col

2 col

4 col

As a list

The grid rendered as ul/li — layout without giving up list semantics.

item 1
item 2
item 3
item 4

Ordering

pf-m-order-* rearranges grid items independently of DOM order.

Item A

Item B

Item C

Responsive ordering

Order modifiers with breakpoint suffixes.

Item A

Item B

Item C

Grouped ordering

Ordering applied to grouped grid sections.

Set 1, Item A

Set 1, Item B

Set 1, Item C

Set 1, Item D

Set 2, Item A

Set 2, Item B

Set 2, Item C

Set 2, Item D

Grouped responsive ordering

Grouped ordering that changes at breakpoints.

Set 1, Item A

Set 1, Item B

Set 1, Item C

Set 1, Item D

Set 2, Item A

Set 2, Item B

Set 2, Item C

Set 2, Item D

Documentation

Grid props

Parameters accepted by {#include layouts/primitives/grid ... /}.

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`gutter`	boolean	Adds `pf-m-gutter` for column + row gaps.
`allCols`	Integer 1-12	Shortcut — emits `pf-m-all-{allCols}-col` so every direct child has the same span without needing per-item classes.
slot `items`	Qute block	Grid children. Each item should be a `pf-v6-l-grid__item` with its own `pf-m-N-col` / `pf-m-N-col-on-{bp}` / `pf-m-offset-N-col-on-{bp}`.

Usage

Grid vs. Gallery vs. Flex. Use Grid for explicit 12-column layouts with variable widths. Use Gallery when every item should be equal width and auto-fill. Use Flex for one-dimensional rows/columns.

Breakpoints. PF v6 has six breakpoints: default, sm, md, lg, xl, 2xl. Append -on-{bp} to any span class.

Edit grid.html on GitHub