Skip to main
Table of Contents

Grid

About

This page demonstrates a 12-column responsive grid inspired by Bootstrap and adapted to Synticore breakpoint classes.

  • Use the simulator to preview breakpoints live.
  • Review foundational row/column examples.
  • Copy production-ready layout patterns and snippets.

Simulator

Use this simulator to test how the same grid content responds at different viewport widths without resizing your browser window.

1200px • desktop • 100%
Drag width to force breakpoints. This uses a self-iframe so @media behavior remains accurate.

Grid Simulator is disabled. Enable it above to preview responsive breakpoints in an iframe here.

Row Basics

Two equivalent <div class="row"> examples are shown below with identical column counts.

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

div

Sections in the Grid

This example shows <section> blocks laid out directly in the grid.

section

section

section

section

Production Layout Patterns

These examples are adapted from real layouts used in related projects and rewritten for this project's supported breakpoint set.

Feature + Action Rail (7 / 5 Split)

Feature Content

Primary media or description block.

Action Rail

Primary CTA

Secondary CTA

<div class="row row--self-clear">
  <div class="col-default-12 col-tablet-12 col-desktop-small-7">...</div>
  <div class="col-default-12 col-tablet-12 col-desktop-small-5">
    <div class="row">
      <div class="col-default-12 col-phone-large-6 col-desktop-small-12">...</div>
      <div class="col-default-12 col-phone-large-6 col-desktop-small-12">...</div>
    </div>
  </div>
</div>

Gallery / Inventory Grid (1 / 2 / 3 / 4 Up)

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

<div class="row">
  <div class="col-default-12 col-phone-large-6 col-tablet-small-6 col-tablet-4 col-desktop-small-3">...</div>
  ...
</div>

Social Button Matrix (Stack to 2-up) 

<div class="row grid-social">
  <div class="col-default-12 col-tablet-small-6">
    <a class="button button--stack font-icon--color--social--linkedin--background grid-social-button" href="...">
      <span class="font-icon--social--linkedin"></span><br>LinkedIn
    </a>
  </div>
  ...
</div>

How to Use the Grid

This grid is based on a 12-column layout. Build layouts using a <div class="row"> container and one or more <div class="col-*"> children.

Basic Structure

Reference: line 1 creates the row container and line 2 defines a full-width column.

<div class="row">
  <div class="col-default-12">...</div>
</div>

Responsive Column Widths

Use breakpoint-specific classes to change the column span at different viewport sizes. These are the same class patterns used in the examples below:

  • col-default-* - default sizing
  • col-phone-* - phone breakpoint
  • col-phone-large-* - large phone breakpoint
  • col-tablet-small-* - small tablet breakpoint
  • col-tablet-* - tablet breakpoint
  • col-tablet-large-* - large tablet breakpoint
  • col-desktop-small-* - small desktop breakpoint
  • col-desktop-* - desktop breakpoint
  • col-desktop-large-* - large desktop breakpoint

The number (1-12) is how many of the 12 columns an element spans. For example, col-tablet-6 means "half width on tablet".

Example: Stack on Mobile, Split on Tablet

Reference: lines 2 and 5 use col-tablet-6, which is what creates the two-column tablet layout.

<div class="row">
  <div class="col-default-12 col-tablet-6">
    <div>Left</div>
  </div>
  <div class="col-default-12 col-tablet-6">
    <div>Right</div>
  </div>
</div>

Nesting Rows for Sub-Layouts

Nest a second .row inside a column when you need a sub-grid (for example, a sidebar with stacked actions that becomes two-up on larger phones).

<div class="row">
  <div class="col-default-12 col-desktop-small-5">
    <div class="row">
      <div class="col-default-12 col-phone-large-6 col-desktop-small-12">...</div>
      <div class="col-default-12 col-phone-large-6 col-desktop-small-12">...</div>
    </div>
  </div>
</div>

Tip: Use the Grid Simulator at the top of this page to force different widths and verify your responsive behavior.

Attribution

This page is comprised of my own additions and either partially or heavily modified elements from the following source(s):