Skip to main content
Pricing

Grid System

Free

A responsive 12-column grid for two-dimensional page layouts. Built on CSS Grid with configurable column spans, row gaps, and breakpoint-aware reflow. Content reflows naturally across screen sizes rather than being hidden on smaller viewports.

6 variants

1
2
3
4
5
6
7
8
9
10
11
12
4 cols
8 cols
3 cols
3 cols
3 cols
3 cols

Variants

VariantDescriptionWhen to use
12-column
6-column
Auto

Usage Guidelines

Do

Use the 12-column grid for page-level layouts and complex asymmetric arrangements.

Don't

Hide grid columns on small screens — reflow them into a single column instead.

Do

Use auto-fill for uniform card or tile layouts that adapt to viewport width.

Don't

Use the grid system for single-axis layouts — use Stack for vertical or horizontal flows.

Do

Set responsive column spans using breakpoint modifiers (e.g., col-12 on mobile, col-6 on tablet).

Don't

Hard-code pixel widths on grid children — let column spans determine width.

Do

Keep the gutter consistent across the page using the gap prop.

Don't

Code

HTML
<!-- 12-Column grid -->
<div class="lex-grid" style="--lex-grid-gap: var(--lex-space-24);">
  <div class="lex-grid__col lex-grid__col--8">
    <h2>Main content</h2>
    <p>Takes up 8 of 12 columns on desktop.</p>
  </div>
  <div class="lex-grid__col lex-grid__col--4">
    <h3>Sidebar widget</h3>
    <p>Takes up 4 of 12 columns on desktop.</p>
  </div>
</div>

<!-- Auto-fill card grid -->
<div class="lex-grid lex-grid--auto-fill"
  style="--lex-grid-min-col: 280px; --lex-grid-gap: var(--lex-space-16);">
  <div class="lex-grid__col">
    <div class="lex-card">Card 1</div>
  </div>
  <div class="lex-grid__col">
    <div class="lex-card">Card 2</div>
  </div>
  <div class="lex-grid__col">
    <div class="lex-card">Card 3</div>
  </div>
  <div class="lex-grid__col">
    <div class="lex-card">Card 4</div>
  </div>
</div>

<!-- Responsive: 2 cols on desktop, 1 on mobile -->
<div class="lex-grid" style="--lex-grid-gap: var(--lex-space-16);">
  <div class="lex-grid__col lex-grid__col--12 lex-grid__col--md-6">Left</div>
  <div class="lex-grid__col lex-grid__col--12 lex-grid__col--md-6">Right</div>
</div>
CSS Custom Properties
.lex-grid {
  display: grid;
  grid-template-columns: repeat(var(--lex-grid-columns, 12), 1fr);
  gap: var(--lex-grid-gap, var(--lex-space-24));
  width: 100%;
}

.lex-grid__col--1  { grid-column: span 1; }
.lex-grid__col--2  { grid-column: span 2; }
.lex-grid__col--3  { grid-column: span 3; }
.lex-grid__col--4  { grid-column: span 4; }
.lex-grid__col--5  { grid-column: span 5; }
.lex-grid__col--6  { grid-column: span 6; }
.lex-grid__col--7  { grid-column: span 7; }
.lex-grid__col--8  { grid-column: span 8; }
.lex-grid__col--9  { grid-column: span 9; }
.lex-grid__col--10 { grid-column: span 10; }
.lex-grid__col--11 { grid-column: span 11; }
.lex-grid__col--12 { grid-column: span 12; }

.lex-grid--auto-fill {
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--lex-grid-min-col, 240px), 1fr)
  );
}

@media (max-width: 767px) {
  .lex-grid {
    grid-template-columns: 1fr;
  }
  .lex-grid__col--1,
  .lex-grid__col--2,
  .lex-grid__col--3,
  .lex-grid__col--4,
  .lex-grid__col--5,
  .lex-grid__col--6,
  .lex-grid__col--7,
  .lex-grid__col--8,
  .lex-grid__col--9,
  .lex-grid__col--10,
  .lex-grid__col--11,
  .lex-grid__col--12 {
    grid-column: span 1;
  }
}

@media (min-width: 768px) {
  .lex-grid__col--md-3  { grid-column: span 3; }
  .lex-grid__col--md-4  { grid-column: span 4; }
  .lex-grid__col--md-6  { grid-column: span 6; }
  .lex-grid__col--md-8  { grid-column: span 8; }
  .lex-grid__col--md-9  { grid-column: span 9; }
}
React
// Using Lexicon CSS classes with React

export function DashboardLayout() {
  return (
    <Grid gap={24}>
      <GridCol span={8} md={9}>
        <MainContent />
      </GridCol>
      <GridCol span={4} md={3}>
        <Sidebar />
      </GridCol>
    </Grid>
  );
}

export function CardGrid() {
  return (
    <Grid variant="auto-fill" minColWidth={280} gap={16}>
      {products.map((product) => (
        <GridCol key={product.id}>
          <ProductCard {...product} />
        </GridCol>
      ))}
    </Grid>
  );
}

export function ThreeColumnLayout() {
  return (
    <Grid gap={16}>
      <GridCol span={12} md={4}><FilterPanel /></GridCol>
      <GridCol span={12} md={4}><ResultsList /></GridCol>
      <GridCol span={12} md={4}><DetailView /></GridCol>
    </Grid>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-grid-columns——columns
--lex-grid-gap——gap
--lex-grid-max-width——width
--lex-grid-padding——padding

Accessibility

  • Content must reflow on small screens — never hide it with display:none at breakpoints.
  • Reading order must follow DOM order; avoid using CSS grid-row/grid-column to rearrange content visually.
  • Grid is a layout primitive — it adds no ARIA roles. Content within grid items provides semantics.
  • Ensure sufficient spacing between grid items for touch targets (WCAG 2.5.5).
  • Use landmark elements (main, aside, nav) within grid columns for page structure.

Keyboard Interactions

TabMoves focus through interactive elements within grid items in DOM order.