TGAM Flexbox Grid | The Globe and Mail Pattern Library

Examples

Section latest layout

1
2
3
4 
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-1 l-col-sm-8 l-col-md-12 l-col-lg-3"> 1 </div>
    <div class="l-col-1 l-col-sm-8 l-col-md-8 l-col-lg-8"> 2 </div>
    <div class="l-col-lg-1 d-hidden-md-down"> 3 </div>
    <div class="l-col-1 l-col-sm-8 l-col-md-4 l-col-lg-4"> 4 </div>
  </div>
</div>

Section list layout

1
2
3
4
1
2
3
4 
HTML
<div class="l-container">
  <div class="l-row">
    <section class="l-col-1">
      <div class="l-row">
        <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 1 </div>
        <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 2 </div>
        <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 3 </div>
        <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 4 </div>
      </div>
    </section>
  </div>
</div>
<div class="l-container">
  <div class="l-row">
    <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 1 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 2 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 3 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 4 </div>
  </div>
</div>

Group 1 layout

1
2
3
4 
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-1 l-col-sm-4 l-col-md-3 l-col-lg-4"> 1 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-3 l-col-lg-4"> 2 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-2 l-col-lg-4"> 3 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-4 l-col-lg-4"> 4 </div>
  </div>
</div>

Group 2 layout

1
2
3 
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-1 l-col-sm-8 l-col-md-6 l-col-lg-8"> 1 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-3 l-col-lg-4"> 2 </div>
    <div class="l-col-1 l-col-sm-4 l-col-md-3 l-col-lg-4"> 3 </div>
  </div>
</div>

Template 1 layout

top-furniture-area
top-fullwidth-area
title-content-area
main-content-area
Card
Card
Card
Card
Card
Card
secondary-content-area
promo-content-area
bottom-furniture-area
HTML
<!-- This is a debug class that sets an overlay to highlight the entire grid's columns -->
<div class="l-container--overlay">
  <!-- #pb-root has a selected PageBuilder "layout" applied to it, this example is "template-1" -->
  <!-- #pb-root is both a grid "container" and also a "flex row" (similiar to l-row) -->
  <!-- #pb-root styles in PageBuilder are equal to "l-container d-flex u-flex-wrap" -->
  <div title="pb-root" class="l-container d-flex u-flex-wrap">
    <!-- The contained "section" elements are grid "columns" -->
    <div title="section" class="l-col-1">top-furniture-area</div>
    <div title="section" class="l-col-1">top-fullwidth-area</div>
    <div title="section" class="l-col-1">title-content-area</div>
    <!-- These "section columns" wrap within the "row", to below other columns before them (in source order) -->
    <div title="section" class="l-col-1 l-col-sm-8 l-col-md-8 l-col-lg-12">
      <div>main-content-area</div>
      <!-- PageBuilder "chains" are a way to create a new row, and wrap "features" in columns -->
      <div title="chain" class="l-row">
        <div title="feature" class="l-col-1 l-col-lg-10 l-offset-lg-1">
          <!-- PageBuilder "features" can then contain their own nested rows and columns -->
          <!-- In order to layout various "specimens" that compose a larger "component" -->
          <div title="component" class="l-row">
            <!-- A card would be any individual "specimen" from the pattern library -->
            <div class="l-col-1 l-col-sm">Card</div>
            <div class="l-col-1 l-col-sm">Card</div>
            <div class="d-hidden-xs-down l-row-clearfix"></div>
            <div class="l-col-1 l-col-sm">Card</div>
            <div class="l-col-1 l-col-sm">Card</div>
            <div class="d-hidden-xs-down l-row-clearfix"></div>
            <div class="l-col-1 l-col-sm">Card</div>
            <div class="l-col-1 l-col-sm">Card</div>
          </div>
        </div>
      </div>
    </div>
    <!-- This seconday content column becomes a right-rail on wide screens -->
    <div title="section" class="l-col-1 l-col-sm-6 l-col-md-4 l-col-lg-4 l-offset-sm-1 l-offset-md-0 l-offset-lg-0">secondary-content-area</div>
    <div title="section" class="l-col-1">promo-content-area</div>
    <div title="section" class="l-col-1 l-col-sm-6 l-col-md-12 l-col-lg-12 l-offset-sm-1 l-offset-md-0 l-offset-lg-2">bottom-furniture-area</div>
  </div>
</div>

Four grid tier

There are four tiers to the grid system, one for each tier we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden. So, a column with only SM classes will remain with fixed column sizing, unless additional MD or LB classes are assigned to the column too.

l-col
l-col
l-col
l-col
l-col-sm-2
l-col-sm-2
l-col-sm-2
l-col-sm-2
l-col-md-3
l-col-md-3
l-col-md-3
l-col-md-3
l-col-lg-4
l-col-lg-4
l-col-lg-4
l-col-lg-4
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col">l-col</div>
    <div class="l-col">l-col</div>
    <div class="l-col">l-col</div>
    <div class="l-col">l-col</div>
  </div>
  <div class="l-row">
    <div class="l-col-sm-2">l-col-sm-2</div>
    <div class="l-col-sm-2">l-col-sm-2</div>
    <div class="l-col-sm-2">l-col-sm-2</div>
    <div class="l-col-sm-2">l-col-sm-2</div>
  </div>
  <div class="l-row">
    <div class="l-col-md-3">l-col-md-3</div>
    <div class="l-col-md-3">l-col-md-3</div>
    <div class="l-col-md-3">l-col-md-3</div>
    <div class="l-col-md-3">l-col-md-3</div>
  </div>
  <div class="l-row">
    <div class="l-col-lg-4">l-col-lg-4</div>
    <div class="l-col-lg-4">l-col-lg-4</div>
    <div class="l-col-lg-4">l-col-lg-4</div>
    <div class="l-col-lg-4">l-col-lg-4</div>
  </div>
</div>

Three equal columns

Get three equal-width columns on MD tier only, or by using auto-width column. This is only possible to do on MD tier (12/3 = 4), but not equally on SM (8/3 = 2.66) or LG (16/4 = 5.33).

l-col-md-3 l-col-md-4 l-col-md-6
l-col-md-3 l-col-md-4 l-col-md-6
l-col-md-2 l-col-md-4 l-col-md-4
l-col
l-col
l-col
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-md-3 l-col-md-4 l-col-md-6">l-col-md-3 l-col-md-4 l-col-md-6</div>
    <div class="l-col-md-3 l-col-md-4 l-col-md-6">l-col-md-3 l-col-md-4 l-col-md-6</div>
    <div class="l-col-md-2 l-col-md-4 l-col-md-4">l-col-md-2 l-col-md-4 l-col-md-4</div>
  </div>
  <div class="l-row">
    <div class="l-col">l-col</div>
    <div class="l-col">l-col</div>
    <div class="l-col">l-col</div>
  </div>
</div>

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

l-col-md-3
l-col-md-6
l-col-md-3
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-md-3">l-col-md-3</div>
    <div class="l-col-md-6">l-col-md-6</div>
    <div class="l-col-md-3">l-col-md-3</div>
  </div>
</div>

Two columns

Get two columns starting at desktops and scaling to large desktops.

l-col-md-8
l-col-md-4
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-md-8">l-col-md-8</div>
    <div class="l-col-md-4">l-col-md-4</div>
  </div>
</div>

Nested grid #1

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

l-col-md-8
l-col-md-4
l-col-md-2
l-col-md-2
l-col-md-4
l-col-md-2
l-col-md-2
l-col-md-4
l-col-md-2
l-col-md-1
l-col-md-1
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-md-8"> l-col-md-8 <div class="l-row">
        <div class="l-col-md-4">l-col-md-4 <div class="l-row">
            <div class="l-col-md-2">l-col-md-2</div>
            <div class="l-col-md-2">l-col-md-2</div>
          </div>
        </div>
        <div class="l-col-md-4">l-col-md-4 <div class="l-row">
            <div class="l-col-md-2">l-col-md-2</div>
            <div class="l-col-md-2">l-col-md-2</div>
          </div>
        </div>
      </div>
    </div>
    <div class="l-col-md-4">l-col-md-4 <div class="l-row">
        <div class="l-col-md-2">l-col-md-2 <div class="l-row">
            <div class="l-col-md-1">l-col-md-1</div>
            <div class="l-col-md-1">l-col-md-1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Nested grid #2

l-col-md-7
l-col-md-2
l-col-md-2
l-col-md-3
l-col-md-1
l-col-md-2
l-col-md-5
l-col-md-3 l-offset-md-2
l-col-md-1
l-col-md-1
l-col-md-1 
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-md-7"> l-col-md-7 <div class="l-row">
        <div class="l-col-md-2"> l-col-md-2 </div>
        <div class="l-col-md-2"> l-col-md-2 </div>
        <div class="l-col-md-3"> l-col-md-3 <div class="l-row">
            <div class="l-col-md-1"> l-col-md-1 </div>
            <div class="l-col-md-2"> l-col-md-2 </div>
          </div>
        </div>
      </div>
    </div>
    <div class="l-col-md-5"> l-col-md-5 <div class="l-row">
        <div class="l-col-md-3 l-offset-md-2"> l-col-md-3 l-offset-md-2 <div class="l-row">
            <div class="l-col-md-1"> l-col-md-1 </div>
            <div class="l-col-md-1"> l-col-md-1 </div>
            <div class="l-col-md-1"> l-col-md-1 </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mixed: mobile (sm) and tablet (md)

The grid system has four tiers of classes: xs (extra small), sm (small), md (medium), and lg (large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

l-col-sm-8 l-col-md-8
l-col-sm-4 l-col-md-4
l-col-sm-3 l-col-md-4
l-col-sm-3 l-col-md-4
l-col-sm-2 l-col-md-4
l-col-sm-4
l-col-sm-4
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-sm-8 l-col-md-8">l-col-sm-8 l-col-md-8</div>
    <div class="l-col-sm-4 l-col-md-4">l-col-sm-4 l-col-md-4</div>
  </div>
  <div class="l-row">
    <div class="l-col-sm-3 l-col-md-4">l-col-sm-3 l-col-md-4</div>
    <div class="l-col-sm-3 l-col-md-4">l-col-sm-3 l-col-md-4</div>
    <div class="l-col-sm-2 l-col-md-4">l-col-sm-2 l-col-md-4</div>
  </div>
  <div class="l-row">
    <div class="l-col-sm-4">l-col-sm-4</div>
    <div class="l-col-sm-4">l-col-sm-4</div>
  </div>
</div>

Mixed: mobile (sm), tablet (md), and desktop (lg)

l-col-1 l-col-sm-6 l-col-md-8 l-col-lg-6
l-col-1 l-col-sm-2 l-col-md-4 l-col-lg-10
l-col l-col-sm-4 l-col-md-6 l-col-lg-8
l-col l-col-sm-4 l-col-md-6 l-col-lg-8
l-col l-col-sm-4 l-col-md-6 l-col-lg-8
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-1 l-col-sm-6 l-col-md-8 l-col-lg-6">l-col-1 l-col-sm-6 l-col-md-8 l-col-lg-6</div>
    <div class="l-col-1 l-col-sm-2 l-col-md-4 l-col-lg-10">l-col-1 l-col-sm-2 l-col-md-4 l-col-lg-10</div>
  </div>
  <div class="l-row">
    <div class="l-col l-col-sm-4 l-col-md-6 l-col-lg-8">l-col l-col-sm-4 l-col-md-6 l-col-lg-8</div>
    <div class="l-col l-col-sm-4 l-col-md-6 l-col-lg-8">l-col l-col-sm-4 l-col-md-6 l-col-lg-8</div>
    <div class="l-col l-col-sm-4 l-col-md-6 l-col-lg-8">l-col l-col-sm-4 l-col-md-6 l-col-lg-8</div>
  </div>
</div>

Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

l-col-sm-2 l-col-md-5 l-col-lg-8
l-col-sm-2 l-col-md-5 l-col-lg-8 l-offset-sm-1 l-offset-md-1 l-offset-lg-0
l-col-sm-3 l-col-md-4 l-col-lg-5
l-col-sm-3 l-col-md-4 l-col-lg-5 l-offset-sm-2 l-offset-md-4 l-offset-lg-6
HTML
<div class="l-container">
  <div class="l-row">
    <div class="l-col-sm-2 l-col-md-5 l-col-lg-8">l-col-sm-2 l-col-md-5 l-col-lg-8</div>
    <div class="l-col-sm-2 l-col-md-5 l-col-lg-8 l-offset-sm-1 l-offset-md-1 l-offset-lg-0">l-col-sm-2 l-col-md-5 l-col-lg-8 l-offset-sm-1 l-offset-md-1 l-offset-lg-0</div>
  </div>
  <div class="l-row">
    <div class="l-col-sm-3 l-col-md-4 l-col-lg-5">l-col-sm-3 l-col-md-4 l-col-lg-5</div>
    <div class="l-col-sm-3 l-col-md-4 l-col-lg-5 l-offset-sm-2 l-offset-md-4 l-offset-lg-6">l-col-sm-3 l-col-md-4 l-col-lg-5 l-offset-sm-2 l-offset-md-4 l-offset-lg-6</div>
  </div>
</div>

One grid to rule them all

Example showing a full grid for each tier.

Extra-small: 100% columns.
1 column, 20px left/right gutter.
Full-width
l-col-1
Auto-width #1
l-col
Auto-width #2
l-col
Small: 768px (48rem) breakpoint, 700px max-column
8 columns, 70px column, 20px gutter.
700px
l-col-sm-8
610px
l-col-sm-7
520px
l-col-sm-6
430px
l-col-sm-5
340px
l-col-sm-4
250px
l-col-sm-3
160px
l-col-sm-2
70px
l-col-sm-1
430px
l-col-sm-5
250px
l-col-sm-3
340px
l-col-sm-4
340px
l-col-sm-4
160px
l-col-sm-2
160px
l-col-sm-2
160px
l-col-sm-2
160px
l-col-sm-2
Medium: 980px (61.25rem) breakpoint, 940px max-column.
12 columns, 60px column, 20px gutter.
940px
l-col-md-12
860px
l-col-md-11
780px
l-col-md-10
700px
l-col-md-9
620px
l-col-md-8
540px
l-col-md-7
460px
l-col-md-6
380px
l-col-md-5
300px
l-col-md-4
220px
l-col-md-3
140px
l-col-md-2
60px
l-col-md-1
620px
l-col-md-8
300px
l-col-md-4
380px
l-col-md-5
220px
l-col-md-3
300px
l-col-md-4
300px
l-col-md-4
300px
l-col-md-4
300px
l-col-md-4
220px
l-col-md-3
220px
l-col-md-3
220px
l-col-md-3
220px
l-col-md-3
Large: 1280px (80rem) breakpoint, 1260px max-column.
16 columns, 60px column, 20px gutter.
1260px
l-col-lg-16
1180px
l-col-lg-15
1100px
l-col-lg-14
1020px
l-col-lg-13
940px
l-col-lg-12
860px
l-col-lg-11
780px
l-col-lg-10
700px
l-col-lg-9
620px
l-col-lg-8
540px
l-col-lg-7
460px
l-col-lg-6
380px
l-col-lg-5
300px
l-col-lg-4
220px
l-col-lg-3
140px
l-col-lg-2
60px
l-col-lg-1
940px
l-col-lg-12
300px
l-col-lg-4
140px
l-col-lg-2
780px
l-col-lg-10
300px
l-col-lg-4
540px
l-col-lg-7
380px
l-col-lg-5
300px
l-col-lg-4
460px
l-col-lg-6
460px
l-col-lg-6
300px
l-col-lg-4
300px
l-col-lg-4
300px
l-col-lg-4
300px
l-col-lg-4
300px
l-col-lg-4
220px
l-col-lg-3
220px
l-col-lg-3
220px
l-col-lg-3
220px
l-col-lg-3
300px
l-col-lg-4
140px
l-col-lg-2
140px
l-col-lg-2
140px
l-col-lg-2
140px
l-col-lg-2
140px
l-col-lg-2
140px
l-col-lg-2
300px
l-col-lg-4
HTML
<div class="d-hidden-sm-up l-container--overlay">
  <div class="l-container">
    <div class="l-row">
      <div class="l-col-1">
        <span>Extra-small: 100% columns.<br>1 column, 20px left/right gutter.</span>
      </div>
    </div>
    <div class="l-row">
      <div class="l-col-1">Full-width<br>l-col-1</div>
    </div>
    <div class="l-row">
      <div class="l-col">Auto-width #1<br>l-col</div>
      <div class="l-col">Auto-width #2<br>l-col</div>
    </div>
  </div>
</div>
<div class="d-hidden-xs-down d-hidden-md-up l-container--overlay">
  <div class="l-container">
    <div class="l-row">
      <div class="l-col-sm-8">
        <span>Small: 768px (48rem) breakpoint, 700px max-column<br> 8 columns, 70px column, 20px gutter.</span>
      </div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-8">700px<br>l-col-sm-8</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-7">610px<br>l-col-sm-7</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-6">520px<br>l-col-sm-6</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-5">430px<br>l-col-sm-5</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-4">340px<br>l-col-sm-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-3">250px<br>l-col-sm-3</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-2">160px<br>l-col-sm-2</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-1">70px<br>l-col-sm-1</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-5">430px<br>l-col-sm-5</div>
      <div class="l-col-sm-3">250px<br>l-col-sm-3</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-4">340px<br>l-col-sm-4</div>
      <div class="l-col-sm-4">340px<br>l-col-sm-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-sm-2">160px<br>l-col-sm-2</div>
      <div class="l-col-sm-2">160px<br>l-col-sm-2</div>
      <div class="l-col-sm-2">160px<br>l-col-sm-2</div>
      <div class="l-col-sm-2">160px<br>l-col-sm-2</div>
    </div>
  </div>
</div>
<div class="d-hidden-sm-down d-hidden-lg-up l-container--overlay">
  <div class="l-container">
    <div class="l-row">
      <div class="l-col-md-12">
        <span>Medium: 980px (61.25rem) breakpoint, 940px max-column.<br> 12 columns, 60px column, 20px gutter.</span>
      </div>
    </div>
    <div class="l-row">
      <div class="l-col-md-12">940px<br>l-col-md-12</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-11">860px<br>l-col-md-11</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-10">780px<br>l-col-md-10</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-9">700px<br>l-col-md-9</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-8">620px<br>l-col-md-8</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-7">540px<br>l-col-md-7</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-6">460px<br>l-col-md-6</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-5">380px<br>l-col-md-5</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-4">300px<br>l-col-md-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-3">220px<br>l-col-md-3</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-2">140px<br>l-col-md-2</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-1">60px<br>l-col-md-1</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-8">620px<br>l-col-md-8</div>
      <div class="l-col-md-4">300px<br>l-col-md-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-5">380px<br>l-col-md-5</div>
      <div class="l-col-md-3">220px<br>l-col-md-3</div>
      <div class="l-col-md-4">300px<br>l-col-md-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-4">300px<br>l-col-md-4</div>
      <div class="l-col-md-4">300px<br>l-col-md-4</div>
      <div class="l-col-md-4">300px<br>l-col-md-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-md-3">220px<br>l-col-md-3</div>
      <div class="l-col-md-3">220px<br>l-col-md-3</div>
      <div class="l-col-md-3">220px<br>l-col-md-3</div>
      <div class="l-col-md-3">220px<br>l-col-md-3</div>
    </div>
  </div>
</div>
<div class="d-hidden-md-down l-container--overlay">
  <div class="l-container">
    <div class="l-row">
      <div class="l-col-lg-16">
        <span>Large: 1280px (80rem) breakpoint, 1260px max-column.<br> 16 columns, 60px column, 20px gutter.</span>
      </div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-16">1260px<br>l-col-lg-16</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-15">1180px<br>l-col-lg-15</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-14">1100px<br>l-col-lg-14</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-13">1020px<br>l-col-lg-13</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-12">940px<br>l-col-lg-12</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-11">860px<br>l-col-lg-11</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-10">780px<br>l-col-lg-10</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-9">700px<br>l-col-lg-9</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-8">620px<br>l-col-lg-8</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-7">540px<br>l-col-lg-7</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-6">460px<br>l-col-lg-6</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-5">380px<br>l-col-lg-5</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-3">220px<br>l-col-lg-3</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-1">60px<br>l-col-lg-1</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-12">940px<br>l-col-lg-12</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-10">780px<br>l-col-lg-10</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-7">540px<br>l-col-lg-7</div>
      <div class="l-col-lg-5">380px<br>l-col-lg-5</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-6">460px<br>l-col-lg-6</div>
      <div class="l-col-lg-6">460px<br>l-col-lg-6</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-3">220px<br>l-col-lg-3</div>
      <div class="l-col-lg-3">220px<br>l-col-lg-3</div>
      <div class="l-col-lg-3">220px<br>l-col-lg-3</div>
      <div class="l-col-lg-3">220px<br>l-col-lg-3</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
    <div class="l-row">
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-2">140px<br>l-col-lg-2</div>
      <div class="l-col-lg-4">300px<br>l-col-lg-4</div>
    </div>
  </div>
</div>

▲ TOP