Grid System

Mod includes a flexible, responsive grid system built on CSS Flexbox that adapts to different screen sizes. The grid system uses a 12-column layout with responsive breakpoints and supports both fixed-width and fluid containers.

Basic Structure

The grid system consists of three main components:

• Container (.mod-grid or .mod-grid-fluid)
• Row (.mod-grid-row)
• Columns (.mod-grid-column-*)

<div class="mod-grid">
  <div class="mod-grid-row">
    <div class="mod-grid-column-6">
      Half width column
    </div>
    <div class="mod-grid-column-6">
      Half width column
    </div>
  </div>
</div>

Containers

Fixed Container

The .mod-grid class creates a fixed-width container that centers content:

<div class="mod-grid">
  <!-- Grid content -->
</div>

Fluid Container

The .mod-grid-fluid class creates a full-width container:

<div class="mod-grid-fluid">
  <!-- Grid content -->
</div>

Rows

Rows (.mod-grid-row) create horizontal groups of columns and handle spacing:

• Uses flexbox with flex-wrap: wrap
• Adds negative margins to offset column padding
• Automatically adds bottom margin between rows
• Last row has no bottom margin

<div class="mod-grid">
  <div class="mod-grid-row">
    <!-- Columns go here -->
  </div>
  <div class="mod-grid-row">
    <!-- Another row -->
  </div>
</div>

Columns

Columns use a 12-column system with responsive breakpoints. All columns have padding for gutters.

Basic Columns

For medium screens and up (940px+), use numbered classes:

<div class="mod-grid-row">
  <div class="mod-grid-column-4">1/3 width</div>
  <div class="mod-grid-column-8">2/3 width</div>
</div>

Available Column Sizes

• .mod-grid-column-1 through .mod-grid-column-12
• Each number represents the fraction of 12 columns

Responsive Breakpoints

The grid system includes multiple responsive breakpoints:

Responsive Example

<div class="mod-grid-row">
  <div class="mod-grid-column-12 mod-grid-column-6-sm mod-grid-column-4-md mod-grid-column-3-lg">
    <!-- Full width on mobile, half on small, 1/3 on medium, 1/4 on large -->
  </div>
</div>

Column Offsets

Use offset classes to push columns to the right (available for medium screens and up):

<div class="mod-grid-row">
  <div class="mod-grid-column-4 mod-grid-offset-4">
    <!-- 4 columns wide, offset by 4 columns (centered) -->
  </div>
</div>

Available Offsets

• .mod-grid-offset-1 through .mod-grid-offset-11

Mobile-First Approach

The grid system is mobile-first, meaning:

• Columns stack vertically on mobile by default
• Apply responsive classes to change layout at larger screens
• Each column gets bottom margin on mobile for spacing

<div class="mod-grid-row">
  <!-- Stacked on mobile, side-by-side on small screens and up -->
  <div class="mod-grid-column-6-sm">Column 1</div>
  <div class="mod-grid-column-6-sm">Column 2</div>
</div>

Spacing

The grid system includes automatic spacing:

• Column gutters: 10px padding on each side (20px total between columns)
• Row spacing: 10px bottom margin on mobile, 20px on tablet and up
• Column spacing: Bottom margin between stacked columns on mobile

Common Patterns

Equal Width Columns

<div class="mod-grid-row">
  <div class="mod-grid-column-4">1/3</div>
  <div class="mod-grid-column-4">1/3</div>
  <div class="mod-grid-column-4">1/3</div>
</div>

Sidebar Layout

<div class="mod-grid-row">
  <div class="mod-grid-column-8">Main content</div>
  <div class="mod-grid-column-4">Sidebar</div>
</div>

Centered Content

<div class="mod-grid-row">
  <div class="mod-grid-column-6 mod-grid-offset-3">
    Centered content
  </div>
</div>

Complex Responsive Layout

<div class="mod-grid-row">
  <div class="mod-grid-column-12 mod-grid-column-6-sm mod-grid-column-3-lg">
    <!-- Full width mobile, half tablet, quarter desktop -->
  </div>
  <div class="mod-grid-column-12 mod-grid-column-6-sm mod-grid-column-6-lg">
    <!-- Full width mobile, half tablet, half desktop -->
  </div>
  <div class="mod-grid-column-12 mod-grid-column-12-sm mod-grid-column-3-lg">
    <!-- Full width mobile and tablet, quarter desktop -->
  </div>
</div>

Best Practices

1. Always wrap columns in rows: Columns should be direct children of .mod-grid-row
2. Use containers: Wrap your grid in .mod-grid or .mod-grid-fluid
3. Plan for mobile: Start with mobile layout and enhance for larger screens
4. Don't exceed 12 columns: Keep the total column count per row at 12 or less
5. Use semantic HTML: The grid is for layout; use appropriate HTML elements for content structure