Layout & Grid

Container, 12-column grid, responsive breakpoints, and common layout patterns.

Breakpoints

Mobile-first breakpoints used across all responsive utilities and grid columns.

Name Min Width CSS Prefix Description
sm 640px uc-col-sm-* / uc-sm: Small phones (landscape) and up
md 768px uc-col-md-* / uc-md: Tablets and up
lg 1024px uc-col-lg-* / uc-lg: Laptops and up
xl 1280px uc-col-xl-* / uc-xl: Desktops and up

Container

Centered wrapper with responsive padding. Max-width 1280px.

html
.uc-container
max-width: 1280px, auto margins, responsive padding
.uc-container-fluid
width: 100%, auto margins, responsive padding
<!-- Centered container (max-width: 1280px) -->
<div class="uc-container">
  Content here
</div>

<!-- Full-width container -->
<div class="uc-container-fluid">
  Full width content
</div>

12-Column Grid

Flex-based row/column system. Use uc-col-{n} for fixed widths, uc-col for auto-equal.

html
uc-col-6 + uc-col-6 (50/50)
col-6
col-6
uc-col-4 + uc-col-4 + uc-col-4 (thirds)
col-4
col-4
col-4
uc-col x5 (fifths via auto columns)
col 1
col 2
col 3
col 4
col 5
uc-col-3 + uc-col-9 (sidebar layout)
col-3
col-9
uc-col-2 x6 (sixths)
col-2
col-2
col-2
col-2
col-2
col-2
<!-- 12-column grid -->
<div class="uc-row">
  <div class="uc-col-4">4 cols</div>
  <div class="uc-col-4">4 cols</div>
  <div class="uc-col-4">4 cols</div>
</div>

<!-- Responsive: full width on mobile, 2 cols on md+ -->
<div class="uc-row">
  <div class="uc-col-md-6">Half on md+</div>
  <div class="uc-col-md-6">Half on md+</div>
</div>

Auto Columns

Use uc-col for equal-width auto columns without specifying a number.

html
Auto
Auto
Auto
<!-- Auto equal columns -->
<div class="uc-row">
  <div class="uc-col">Auto</div>
  <div class="uc-col">Auto</div>
  <div class="uc-col">Auto</div>
</div>

Responsive Grid

Columns adapt at each breakpoint. Full-width on mobile, multi-column on larger screens.

Full → 2 cols on sm → 4 cols on lg
Item 1
Item 2
Item 3
Item 4

CSS Grid Utilities

For simpler equal-column layouts, use uc-grid with uc-grid-cols-{n}.

html
uc-grid uc-grid-cols-3 uc-gap-4
1
2
3
uc-grid uc-grid-cols-1 uc-sm:grid-cols-2 uc-lg:grid-cols-3 uc-gap-4
Card 1
Responsive card grid
Card 2
Responsive card grid
Card 3
Responsive card grid
<div class="uc-grid uc-grid-cols-1 uc-sm:grid-cols-2 uc-lg:grid-cols-3 uc-gap-4">
  <div class="uc-card">Card 1</div>
  <div class="uc-card">Card 2</div>
  <div class="uc-card">Card 3</div>
</div>

Common Layouts

Patterns built with flex and grid utilities.

Sidebar + Content

html
Sidebar
Main Content
<div class="uc-flex uc-min-h-screen">
  <aside class="uc-w-64 uc-shrink-0 uc-border-r uc-border-border-default">
    Sidebar
  </aside>
  <main class="uc-flex-1 uc-min-w-0">
    Main content
  </main>
</div>

Holy Grail (Header + Sidebar + Content + Footer)

html
Header
Nav
Content
Footer
<div class="uc-flex uc-flex-col uc-min-h-screen">
  <header class="uc-border-b uc-border-border-default uc-p-4">
    Header
  </header>
  <div class="uc-flex uc-flex-1">
    <aside class="uc-w-48 uc-border-r uc-border-border-default uc-p-4">
      Sidebar
    </aside>
    <main class="uc-flex-1 uc-p-6">
      Main content
    </main>
  </div>
  <footer class="uc-border-t uc-border-border-default uc-p-4">
    Footer
  </footer>
</div>

Grid vs Row/Col

When to use which layout system.

uc-grid + uc-grid-cols-*
  • Equal-width columns
  • Card grids, galleries
  • Simple responsive layouts
  • Fixed column count
uc-row + uc-col-*
  • Asymmetric columns (3+9, 4+8)
  • Sidebar layouts
  • Complex responsive breakpoints
  • Bootstrap-style grid