Grid Utilities

McGowanStyle's grid provides a simple 12-column system and utility classes that make it quick to build responsive layouts without adding page-specific styles. Use u-grid to create a grid container and the u-col-* classes to place content into columns.

The examples below mirror common patterns you may recognize from other frameworks, but use the McGowan utilities and MS card components to demonstrate practical layouts.

Container

Use u-container to center and constrain content. The container adapts to the configured breakpoints so content is readable on all viewports.

Live example: .u-container

This card sits inside a constrained container to show how content is centered and limited at larger widths.

HTML
<div class="u-container">
  <div class="ms-card">
    <h3>Constrained content</h3>
    <p>Put your content here</p>
  </div>
</div>

Basic Grid

Create rows with u-grid and add column classes to children. Columns will wrap to new rows when they exceed the 12-column width.

Column 4

One third width on wide screens (u-col-4).

Column 4

Another one third column.

Column 4

The grid will place these three columns on one row at wide breakpoints.

HTML
<div class="u-grid u-grid-cols-12">
  <div class="u-col-4"><div class="ms-card">Column 1</div></div>
  <div class="u-col-4"><div class="ms-card">Column 2</div></div>
  <div class="u-col-4"><div class="ms-card">Column 3</div></div>
</div>

Responsive Columns

Combine breakpoint-aware column classes to control how columns behave across viewports. Below demonstrates 1/1 on small, 1/2 on medium, and 1/3 on large.

u-col-12 u-col-md-6 u-col-lg-4
u-col-12 u-col-md-6 u-col-lg-4
u-col-12 u-col-md-12 u-col-lg-4
HTML
<div class="u-grid u-grid-cols-12">
  <div class="u-col-12 u-col-md-6 u-col-lg-4"><div class="ms-card">Column A</div></div>
  <div class="u-col-12 u-col-md-6 u-col-lg-4"><div class="ms-card">Column B</div></div>
  <div class="u-col-12 u-col-md-12 u-col-lg-4"><div class="ms-card">Column C</div></div>
</div>

Auto-wrapping Columns

When column widths add up to more than 12 the remaining columns wrap to the next line. This lets you build masonry-like layouts without additional utilities.

1
2
3
4 (wraps)
8 (new row)
HTML
<div class="u-grid u-grid-cols-12">
  <div class="u-col-4"><div class="ms-card">1</div></div>
  <div class="u-col-4"><div class="ms-card">2</div></div>
  <div class="u-col-4"><div class="ms-card">3</div></div>
  <div class="u-col-4"><div class="ms-card">4 (wraps)</div></div>
  <div class="u-col-8"><div class="ms-card">8 (new row)</div></div>
</div>

Nesting Grids

You can nest a new u-grid inside a column to create more complex layouts.

Column (4)

Column (8)

Nested half
Nested half
HTML
<div class="u-grid u-grid-cols-12">
  <div class="u-col-8">
    <div class="u-grid u-grid-cols-12">
      <div class="u-col-6"><div class="ms-card">Nested A</div></div>
      <div class="u-col-6"><div class="ms-card">Nested B</div></div>
    </div>
  </div>
  <div class="u-col-4"><div class="ms-card">Sidebar</div></div>
</div>

Practical Examples

Below are common patterns built with the grid: a three-up gallery, a two-column feature list, and a sidebar/content layout.

Three-up gallery

Image/Card 1
Image/Card 2
Image/Card 3

Feature list (2-up)

Feature A
Feature B
Feature C
Feature D

Sidebar / Content

Sidebar
Main content area. Use this pattern for docs, dashboards, or article layouts.
<