Skip to main content

Grid System Documentation

Master the flexible 16-column responsive aiab-grid system

Introduction to the Grid System

Amphibious uses a powerful 16-column aiab-grid system based on the proven 960 Grid System principles. The aiab-grid provides maximum flexibility for layouts while maintaining simplicity and consistency.

Key Features: 16 columns • Responsive breakpoints • Fluid and fixed options • Nestable • Golden ratio support

Core Concepts

Concept Description Example
Container Wraps the aiab-grid system, 960px fixed or 96% fluid <div class="aiab-container">
Row Horizontal group of columns <div class="aiab-row">
Column Vertical divisions, 1-16 units wide <div class="aiab-col-8">
Gutter Space between columns (20px default) Automatic

Basic Grid Structure

Simple Two-Column Layout

8 Columns (50%)
8 Columns (50%)
<div class="aiab-container">
  <div class="aiab-row">
    <div class="aiab-col-8">8 Columns (50%)</div>
    <div class="aiab-col-8">8 Columns (50%)</div>
  </div>
</div>

Three-Column Layout

5 Columns
6 Columns
5 Columns

Four-Column Layout

4 Columns
4 Columns
4 Columns
4 Columns

All Column Sizes

1
15 Columns
2
14 Columns
3
13 Columns
4
12 Columns
5
11 Columns
6
10 Columns
7
9 Columns
8
8 Columns
16 Columns (Full Width)

Responsive Grid

The aiab-grid system includes responsive classes that adapt to different screen sizes. Columns automatically stack on mobile devices and expand on larger screens.

Responsive Breakpoints

Breakpoint Class Prefix Screen Size Container Width
Desktop col-* ≥960px 960px fixed
Tablet col-tablet-* 768px - 959px 96% fluid
Mobile col-mobile-* <768px 100% fluid
Mobile First: Start with mobile layout and enhance for larger screens using responsive classes.

Responsive Example

Current View: Desktop (960px+)
Sidebar
Main Content
Aside 
<div class="aiab-row">
  <div class="aiab-col-4 aiab-col-tablet-8 aiab-col-mobile-16">Sidebar</div>
  <div class="aiab-col-8 aiab-col-tablet-8 aiab-col-mobile-16">Main Content</div>
  <div class="aiab-col-4 aiab-col-tablet-16 aiab-col-mobile-16">Aside</div>
</div>

Nesting Grids

Columns can be nested within other columns to create complex layouts. Use .first and .last classes to remove margins on nested columns.

Basic Nesting

10 Column Parent
6 Nested
4 Nested
6 Column Sidebar
<div class="aiab-row">
  <div class="aiab-col-10">
    10 Column Parent
    <div class="aiab-row">
      <div class="aiab-col-6 first">6 Nested</div>
      <div class="aiab-col-4 last">4 Nested</div>
    </div>
  </div>
  <div class="aiab-col-6">6 Column Sidebar</div>
</div>

Golden Ratio Layout Popular

Create aesthetically pleasing layouts using the golden ratio (1.618:1). The 16-column aiab-grid makes this easy with 10:6 column splits.

Main Content (Golden)
Sidebar (Ratio)
Golden Ratio Combinations: 10:6, 6:4, and nested 6:4 within 10 columns all approximate the golden ratio.

Grid Utilities

Offset Classes

Push columns to the right using offset classes:

4 Columns with 4 Offset
4 Columns
8 Columns Centered

Push and Pull (Source Ordering)

Change the visual order of columns for SEO optimization:

First in source, appears right
Second in source, appears left
<!-- SEO-friendly: Main content first in source -->
<div class="aiab-row">
  <div class="aiab-col-10 aiab-push-6">Main Content (First in HTML)</div>
  <div class="aiab-col-6 pull-10">Sidebar (Second in HTML)</div>
</div>

Fluid Columns

Use fluid percentage-based columns for flexible layouts:

One Third
One Third
One Third
1/4
Half (1/2)
1/4
Three Quarters (3/4)
1/4
Class Width Use Case
.one-quarter 25% Small sidebars, aiab-card layouts
.one-third 33.33% Three-column layouts
.half 50% Two-column splits
.two-thirds 66.66% Main content with aiab-sidebar
.three-quarters 75% Wide content areas

Real-World Examples

E-commerce Product Grid

Filters
  • ✓ Category
  • ✓ Price
  • ✓ Brand
Product 1
Product 2
Product 3
Product 4
Product 5
Product 6

Blog Layout with Sidebar

Header Navigation
Blog Post Content
Recent Posts
Categories
Tags
Footer

Dashboard Layout

Navigation
  • Dashboard
  • Analytics
  • Reports
  • Settings
Metric 1
Metric 2
Metric 3
Chart Area
Activity Feed

Interactive Grid Playground

Build Your Layout

Sample Column 1
Sample Column 2
Generated Code: 
<div class="aiab-row">
  <div class="aiab-col-8">Sample Column 1</div>
  <div class="aiab-col-8">Sample Column 2</div>
</div>

Best Practices

Do's:

  • ✓ Always wrap columns in a .aiab-row
  • ✓ Ensure column widths add up to 16 or less
  • ✓ Use responsive classes for mobile optimization
  • ✓ Nest grids when needed for complex layouts
  • ✓ Use semantic HTML within aiab-grid columns

Don'ts:

  • ✗ Don't exceed 16 columns in a aiab-row
  • ✗ Don't forget .first and .last on nested columns
  • ✗ Don't use the aiab-grid for micro-layouts (use flexbox instead)
  • ✗ Don't mix fluid and fixed columns in the same aiab-row

Migration from Other Grids

From Bootstrap (12-column)

Bootstrap Amphibious Notes
.col-md-6 .aiab-col-8 50% width
.col-md-4 .aiab-col-5 ~33% width
.col-md-3 .aiab-col-4 25% width
.col-md-8 .aiab-col-11 ~66% width

From CSS Grid

While CSS Grid is more powerful for complex layouts, Amphibious aiab-grid provides: