CSS-Only

Grid

Pure CSS grid system with simple column layouts, bento grids, and masonry patterns. Responsive by default, no JavaScript required.

Example

A flexible grid system with both simple layouts and advanced bento-style configurations.

Featured

6 columns, 2 rows

Widget 1

Span 3

Widget 2

Span 3

Widget 3

Span 3

Widget 4

Span 3

Full Width Footer — Spans all columns 
<div class="omni-bento-grid omni-bento-rows-auto">
  <div class="omni-card omni-bento-span-6 omni-bento-row-2">Featured</div>
  <div class="omni-card omni-bento-span-3">Widget 1</div>
  <div class="omni-card omni-bento-span-3">Widget 2</div>
  <div class="omni-card omni-bento-span-3">Widget 3</div>
  <div class="omni-card omni-bento-span-3">Widget 4</div>
  <div class="omni-card omni-bento-span-full">Full Width Footer</div>
</div>

Simple Grid Layouts

Basic column layouts that work out of the box with responsive breakpoints.

Two Columns

Responsive grid that stacks on mobile:

Column 1
Column 2
<div class="omni-grid-2">
  <div class="omni-card">Column 1</div>
  <div class="omni-card">Column 2</div>
</div>

Three Columns

Three columns on desktop, two on tablet, one on mobile:

Column 1
Column 2
Column 3

Four Columns

Four columns on desktop, two on tablet/mobile:

Column 1
Column 2
Column 3
Column 4

Auto-Fit Grid

Automatically fits columns based on minimum width. Set --omni-grid-min-width to control minimum column size:

Auto 1
Auto 2
Auto 3
Auto 4
Auto 5
<div class="omni-grid omni-grid-auto" style="--omni-grid-min-width: 200px;">
  <div class="omni-card">Auto 1</div>
  <div class="omni-card">Auto 2</div>
  <!-- ... -->
</div>

Gap Control

Control spacing between grid items:

No Gap

Item 1
Item 2
Item 3

Small Gap (8px)

Item 1
Item 2
Item 3

Large Gap (24px)

Item 1
Item 2
Item 3
<div class="omni-grid-3 omni-grid-gap-0">...</div>
<div class="omni-grid-3 omni-grid-gap-2">...</div>
<div class="omni-grid-3 omni-grid-gap-4">...</div> <!-- Default -->
<div class="omni-grid-3 omni-grid-gap-6">...</div>

Common App Layouts

Sidebar Layout

Sidebar with main content. Set --omni-sidebar-width to control sidebar size:

Sidebar
Main Content
<div class="omni-grid omni-grid-sidebar" style="--omni-sidebar-width: 250px;">
  <aside class="omni-card">Sidebar</aside>
  <main class="omni-card">Main Content</main>
</div>

Header Layout

Full-height layout with fixed header:

<div class="omni-grid omni-grid-header">
  <header class="omni-card">Header</header>
  <main class="omni-card">Main Content</main>
</div>

Bento Grid System

Advanced 12-column grid system with flexible item sizing and intelligent gap filling.

Basic Bento Grid

12-column grid that adapts to smaller screens (8 cols on tablet, 4 on mobile):

Span 6
Span 6
Span 4
Span 4
Span 4
<div class="omni-bento-grid omni-bento-rows-auto">
  <div class="omni-card omni-bento-span-6">Span 6</div>
  <div class="omni-card omni-bento-span-6">Span 6</div>
  <div class="omni-card omni-bento-span-4">Span 4</div>
  <div class="omni-card omni-bento-span-4">Span 4</div>
  <div class="omni-card omni-bento-span-4">Span 4</div>
</div>

Magazine Layout

Editorial layout with featured first item:

Featured Story
Story 2
Story 3
Story 4
Story 5
Story 6
<div class="omni-bento-grid omni-bento-grid-magazine">
  <article class="omni-card">Featured Story</article>
  <article class="omni-card">Story 2</article>
  <article class="omni-card">Story 3</article>
  <!-- ... -->
</div>

Row Spanning

Items can span multiple rows:

Tall Item (Row 2)
Item 2
Item 3
Item 4
Item 5
<div class="omni-bento-grid omni-bento-rows-auto">
  <div class="omni-card omni-bento-span-4 omni-bento-row-2">Tall Item</div>
  <div class="omni-card omni-bento-span-4">Item 2</div>
  <!-- ... -->
</div>

Full Width Span

Full Width Header
Column 1
Column 2
Column 3

Masonry Layout

Pinterest-style layout using CSS columns (not grid). Items flow vertically then horizontally:

Item 1
Item 2 (Tall)
Item 3
Item 4
Item 5
Item 6
<div class="omni-bento-grid-masonry">
  <div class="omni-card">Item 1</div>
  <div class="omni-card">Item 2</div>
  <!-- Variable height items -->
</div>

Row Height Control

Control the height behavior of grid rows:

Auto Rows (120px min)

Auto
Auto
Auto

Fixed Rows (192px)

Fixed
Fixed
Fixed
<div class="omni-bento-grid omni-bento-rows-auto">...</div>
<div class="omni-bento-grid omni-bento-rows-fixed">...</div>
<div class="omni-bento-grid omni-bento-rows-sm">...</div>
<div class="omni-bento-grid omni-bento-rows-lg">...</div>

Additional Utilities

Alignment

Centered
Centered
Centered
<div class="omni-grid-3 omni-grid-center">...</div>
<div class="omni-grid-3 omni-grid-start">...</div>
<div class="omni-grid-3 omni-grid-stretch">...</div>

Aspect Ratios

Control item aspect ratios:

Square
Video (16:9)
Landscape (4:3)
Portrait (3:4)
<div class="omni-card omni-aspect-square">...</div>
<div class="omni-card omni-aspect-video">...</div>
<div class="omni-card omni-aspect-landscape">...</div>
<div class="omni-card omni-aspect-portrait">...</div>

API Reference

Simple Grid Classes

Class Description Responsive Behavior
.omni-grid Base grid container Always grid, default gap
.omni-grid-2 2-column layout 1 col on mobile
.omni-grid-3 3-column layout 2 cols on tablet, 1 on mobile
.omni-grid-4 4-column layout 2 cols on tablet/mobile
.omni-grid-auto Auto-fit columns Based on --omni-grid-min-width
.omni-grid-sidebar Sidebar layout Stacks on mobile
.omni-grid-header Header + main layout Full viewport height

Bento Grid Classes

Class Description
.omni-bento-grid 12-column bento grid container
.omni-bento-grid-magazine Magazine layout with featured first item
.omni-bento-grid-masonry Pinterest-style masonry layout
.omni-bento-item Bento grid item with hover effects
.omni-bento-span-2/3/4/6 Column span utilities (responsive)
.omni-bento-span-full Full width span (1 / -1)
.omni-bento-row-2/3 Row span utilities

Row Height Utilities

Class Height
.omni-bento-rows-auto minmax(120px, auto)
.omni-bento-rows-fixed 192px
.omni-bento-rows-sm 120px
.omni-bento-rows-lg 240px
.omni-bento-rows-equal 1fr

Gap Utilities

Class Gap Size
.omni-grid-gap-0 0
.omni-grid-gap-2 8px
.omni-grid-gap-4 16px (default)
.omni-grid-gap-6 24px
.omni-bento-gap-* Same values for bento grids
.omni-bento-row-gap-* Row-specific gap
.omni-bento-col-gap-* Column-specific gap

Other Utilities

Class Description
.omni-grid-center Center items in grid
.omni-grid-start Align items to start
.omni-grid-stretch Stretch items to fill
.omni-aspect-square 1:1 aspect ratio
.omni-aspect-video 16:9 aspect ratio
.omni-aspect-landscape 4:3 aspect ratio
.omni-aspect-portrait 3:4 aspect ratio

CSS Custom Properties

Property Default Description
--omni-grid-min-width — Minimum column width for auto-fit grids
--omni-sidebar-width — Width of sidebar in sidebar layout
--omni-bento-columns 12 Number of columns in bento grid
--omni-bento-gap 16px Gap size for bento grid

Advanced Features

Auto Layout Adaptation

Add data-auto-layout to enable automatic layout adaptation based on item count:

<div class="omni-bento-grid" data-auto-layout>
  <!-- Grid adapts based on number of items -->
</div>

Container Queries

Bento grid items respond to container size, not viewport. Items automatically stack when the container is small, regardless of viewport size.

Dense Grid Packing

Bento grids use grid-auto-flow: dense to fill gaps intelligently, creating compact layouts automatically.

Accessibility

  • Pure CSS implementation works everywhere, including email clients
  • Responsive breakpoints ensure readable layouts on all screen sizes
  • Grid gaps provide sufficient spacing for touch targets
  • Container queries enable context-aware responsive behavior
  • Masonry layout maintains source order for screen readers
  • Bento item hover effects respect prefers-reduced-motion
  • No JavaScript required means no runtime failures

Components Used

Other OmniUI components demonstrated on this page:

Card