Grid & Container

Build responsive page layouts with our flexible container and grid system.

Container

Containers provide a way to center and horizontally pad your content. Use .focus-container for a responsive fixed-width container or .focus-container-fluid for full-width spanning.

.focus-container

HTML

<div class="focus-container">
  <!-- Content -->
</div>

Fluid Container

Full-width container with padding on both sides.

.focus-container-fluid

HTML

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

Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes. The grid uses a 12-column system with responsive breakpoints.

How it Works

Container: Wrap your layout in .focus-container or .focus-container-fluid
Row: Use .focus-row to create a horizontal group of columns
Columns: Use .focus-col-* classes to specify column widths
Responsive: Columns stack on mobile by default, use breakpoint classes like .focus-col-md-6 for responsive layouts

Equal Width Columns

Use .focus-col for equal-width columns that automatically share space.

.focus-col

HTML

<div class="focus-row">
  <div class="focus-col">Column</div>
  <div class="focus-col">Column</div>
  <div class="focus-col">Column</div>
</div>

Fixed Width Columns

Specify exact column widths using .focus-col-{1-12} classes.

.focus-col-4

.focus-col-8

.focus-col-6

HTML

<div class="focus-row">
  <div class="focus-col-4">4 columns</div>
  <div class="focus-col-8">8 columns</div>
</div>

<div class="focus-row">
  <div class="focus-col-6">6 columns</div>
  <div class="focus-col-6">6 columns</div>
</div>

Responsive Grid

Create responsive layouts that adapt to different screen sizes using breakpoint-specific column classes.

Breakpoint	Class Prefix	Min Width
Extra Small	`.focus-col-`	<576px
Small	`.focus-col-sm-`	≥576px
Medium	`.focus-col-md-`	≥768px
Large	`.focus-col-lg-`	≥992px
Extra Large	`.focus-col-xl-`	≥1200px

Mobile-First Example

Columns stack on mobile, then display side-by-side on medium screens and up.

.focus-col-12 .focus-col-md-8
Full width on mobile, 8 cols on tablet+

.focus-col-12 .focus-col-md-4
Full width on mobile, 4 cols on tablet+

HTML

<div class="focus-row">
  <div class="focus-col-12 focus-col-md-8">
    Main content
  </div>
  <div class="focus-col-12 focus-col-md-4">
    Sidebar
  </div>
</div>

Ready-to-Use Templates

Copy and paste these complete page layouts to get started quickly.

Two-Column Layout

Classic content + sidebar layout. Perfect for blogs, documentation, and dashboards.

Main Content

HTML

<div class="focus-container-fluid">
  <div class="focus-row">
    <aside class="focus-col-12 focus-col-md-3">
      <!-- Sidebar navigation -->
    </aside>
    <main class="focus-col-12 focus-col-md-9">
      <!-- Main content -->
    </main>
  </div>
</div>

Three-Column Layout

Great for dashboards with side navigation and content with sidebar.

Content

HTML

<div class="focus-container-fluid">
  <div class="focus-row">
    <aside class="focus-col-12 focus-col-md-2">
      <!-- Left navigation -->
    </aside>
    <main class="focus-col-12 focus-col-md-7">
      <!-- Main content -->
    </main>
    <aside class="focus-col-12 focus-col-md-3">
      <!-- Right sidebar -->
    </aside>
  </div>
</div>

Card Grid Layout

Responsive card grid that adapts from 1 column (mobile) to 4 columns (desktop).

Card 1

Card 2

Card 3

Card 4

HTML

<div class="focus-container">
  <div class="focus-row">
    <div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
      <div class="focus-card">Card 1</div>
    </div>
    <div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
      <div class="focus-card">Card 2</div>
    </div>
    <div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
      <div class="focus-card">Card 3</div>
    </div>
    <div class="focus-col-12 focus-col-sm-6 focus-col-lg-3">
      <div class="focus-card">Card 4</div>
    </div>
  </div>
</div>

Centered Content

Center a narrow content column for forms, articles, or landing pages.

Centered Content

HTML

<div class="focus-container">
  <div class="focus-row focus-row-center">
    <div class="focus-col-12 focus-col-md-8 focus-col-lg-6">
      <!-- Centered content (forms, articles, etc.) -->
    </div>
  </div>
</div>

Alignment

Control column alignment within rows using alignment utility classes.

Horizontal Alignment

.focus-row-start

.focus-row-center

.focus-row-end

HTML

<div class="focus-row focus-row-start">...</div>
<div class="focus-row focus-row-center">...</div>
<div class="focus-row focus-row-end">...</div>

Vertical Alignment

Top

Center

Bottom

HTML

<div class="focus-row focus-row-align-start">...</div>
<div class="focus-row focus-row-align-center">...</div>
<div class="focus-row focus-row-align-end">...</div>