Responsive Grid System Documentation

Base Responsive Grid

Preview

Column 1
Column 2
Column 3
Column 4
Column 5

Class Declaration

Class Description
.g-res-container or .grid-res-container Creates a responsive grid with auto-fill columns (minimum 200px width). Collapses to single column at tablet breakpoint unless modified with break classes.
.column Basic grid item spanning 1 column.
.span-[n] Spans [n] columns (1-10, e.g., .span-2).

HTML Usage

<div class="g-res-container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

2-Column Grid

Preview

Column 1
Column 2

Class Declaration

Class Description
.g-res-2-col-container or .grid-res-2-col-container Fixed 2-column grid layout. Collapses to single column at tablet breakpoint unless modified.

HTML Usage

<div class="g-res-2-col-container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

3-Column Grid

Preview

Column 1
Column 2
Column 3

Class Declaration

Class Description
.g-res-3-col-container or .grid-res-3-col-container Fixed 3-column grid layout with equal widths.

HTML Usage

<div class="g-res-3-col-container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

Breakpoint Modifier Classes

These classes modify the column count at specific breakpoints. Can be applied to any grid container class.

Preview Examples

3-Column breaking to 2 at Tablet

Column 1
Column 2
Column 3

4-Column breaking to 2 at Mobile-L and 3 at Tablet

Column 1
Column 2
Column 3
Column 4

Class Declaration

Class Pattern Description
.break-[n]-[breakpoint] Changes grid to [n] columns (2-10) at specified breakpoint. Replace [n] with 2-10 and [breakpoint] with: mobile-s, mobile-m, mobile-l, tablet, tablet-l, laptop, laptop-l, desktop, desktop-l, desktop-xl, desktop-xxl, desktop-xxxl
.break-2-tablet Example: Sets grid to 2 columns at tablet breakpoint.
.break-3-laptop Example: Sets grid to 3 columns at laptop breakpoint.

HTML Usage

<!-- 3-column breaking to 2 at tablet -->
<div class="g-res-3-col-container break-2-tablet">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

<!-- 4-column with multiple breakpoints -->
<div class="g-res-4-col-container break-2-mobile-l break-3-tablet">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
  <div class="column">Column 4</div>
</div>

Other Grid Variants (4-col to 10-col)

Similar patterns apply for .g-res-[n]-col-container where [n] ranges from 4 to 10.

Preview (4-Column Example with Span)

Span 2 Columns
Column 2
Column 3

HTML Usage

<div class="g-res-4-col-container">
  <div class="column span-2">Span 2 Columns</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>