Grid

Grid utility classes let you quickly build layouts using CSS Grid properties. For more advanced layouts, combine grid utilities with responsive.

Use Cases

Basic Grid Layout

<div class="ro-grid ro-cols-3 ro-u-gap-2">
<div class="ro-card ro-u-bg-product-light">1</div>
<div class="ro-card ro-u-bg-danger-light">2</div>
<div class="ro-card ro-u-bg-success-light">3</div>
</div>

Preview

1

2

3

Auto-Sizing Columns

<div class="ro-grid ro-cols-auto-3 ro-u-gap-2">
<div class="ro-card">Short</div>
<div class="ro-card">Medium content</div>
<div class="ro-card">Longer content here</div>
</div>

Preview

Short

Medium content

Longer content here

Responsive Columns

<div class="ro-grid ro-cols-2 md:ro-cols-4 ro-u-gap-2">
<div class="ro-card">A</div>
<div class="ro-card">B</div>
<div class="ro-card">C</div>
<div class="ro-card">D</div>
</div>

Preview

A

B

C

D

Spanning Columns

<div class="ro-grid ro-cols-4 ro-u-gap-2">
<div class="ro-card ro-col-span-2">Span 2</div>
<div class="ro-card">1</div>
<div class="ro-card">2</div>
</div>

Preview

Span 2

1

2

Bento Grid Example

A “bento grid” is a visually interesting layout with items spanning multiple rows and columns. It is very useful for stats dashboards.

<div class="ro-grid ro-cols-4 ro-u-gap-2" style="height: 320px;">
<div class="ro-card ro-col-span-2 ro-row-span-2 ro-u-bg-product-light">A</div>
<div class="ro-card ro-u-bg-danger-light">B</div>
<div class="ro-card ro-u-bg-success-light">C</div>
<div class="ro-card ro-col-span-2 ro-u-bg-warning-light">D</div>
<div class="ro-card ro-u-bg-danger-light">E</div>
</div>

Preview

A

B

C

D

E

Properties

Grid Container

Class	Description
.ro-grid	Display grid

Columns

Class	Description
.ro-cols-1–.ro-cols-12	Set number of equal columns (1–12)
.ro-cols-none	No grid columns
.ro-cols-auto-1–.ro-cols-auto-12	Auto-sized columns (1–12)
.ro-cols-max-1–.ro-cols-max-12	Max-content columns (1–12)
.ro-cols-min-1–.ro-cols-min-12	Min-content columns (1–12)
.ro-cols-fit-1–.ro-cols-fit-12	Fit-content columns (1–12)

Responsive Columns

Class Prefix	Description
md:ro-cols-*	Columns at ≥768px (tablet)
lg:ro-cols-*	Columns at ≥1024px (desktop)
xl:ro-cols-*	Columns at ≥1280px (large screen)
xxl:ro-cols-*	Columns at ≥1536px (xl screen)

Spanning

Class	Description
.ro-col-span-1–.ro-col-span-12	Span columns (1–12)
.ro-row-span-1–.ro-row-span-12	Span rows (1–12)
.md:ro-col-span-*, .lg:ro-col-span-*, etc.	Responsive spans

Grid Column Helpers

Class	Description
.ro-u-grid-column-auto	grid-column: auto
.ro-u-grid-column-min-content	grid-column: min-content
.ro-u-grid-column-max-content	grid-column: max-content
.ro-u-grid-column-fit-content	grid-column: fit-content

Gap

Use .ro-u-gap-* utility classes to add spacing between grid items. See Gutters for details.