The Responsive Grid Layout

Using the Responsive Grid Layout you can create a page with rows and columns in a 12-column grid. This page creates three rows and three columns using the class "col_4" on each div in the grid. The "col_4" class will size to a width of four columns. In a 12-column grid, this means a column that is 1/3 of the page width.
This was first introduced in the CE3 line of TTG plug-ins. See the TTG documentation here to get an overview.
And see the post on my TTG-Tips site about what's changed in the Backlight version of the Responsive Grid Framework.

Heading text

Using a Font-Awesome icon in the heading and wrapping the heading text in html "strong" tags.

This column takes up 1/3 of the page. "Alpha" class used to remove padding-left.

Heading text

Section text

This column takes up 1/3 of the page.

Heading text

Section text

This column takes up 1/3 of the page. "Omega" class used to remove padding-right.

Heading text

This column takes up 1/3 of the page. A style of "flont-size: smaller;" is applied to the entire row. "alpha" class removed from left column. This restores 24px of padding-left, which is styled into the grid.

Heading text

This column takes up 1/3 of the page.

Heading text

This column takes up 1/3 of the page. "omega" class removed. Padding-right of 24px, built into the grid, is being used.

Heading text

Section text

This column takes up 1/3 of the page. "alpha" class removed from left column. This restores 24px of padding-left, which is styled into the grid.

Heading text

Section text

This column takes up 1/3 of the page.

Heading text

Section text

This column takes up 1/3 of the page. "omega" class removed. Padding-right of 24px, built into the grid, is being used.

The code

Below is the html used to create the grid above.


<div class="grid_12">
<div class="col_4 alpha">
<h3><i class="fa fa-picture-o fa-lg"></i> <strong>Heading text</strong></h3>
<p>Section text</p>

<p>This column takes up 1/3 of the page. "Alpha" class used to remove padding-left.</p>

</div>
<div class="col_4">
<h3>Heading text</h3>
<p>Section text</p>

<p>This column takes up 1/3 of the page.</p>

</div>
<div class="col_4 omega">
<h3>Heading text</h3>
<p>Section text</p>

<p>This column takes up 1/3 of the page. "Omega" class used to remove padding-right.</p>

</div>
</div>
<div class="grid_12" style="font-size: smaller;">
<div class="col_4">
<h3>Heading text</h3>
<p>This column takes up 1/3 of the page. A style of "flont-size: smaller;" is applied to the entire row. "alpha" class removed from left column. This restores 24px of padding-left, which is styled into the grid.</p>

</div>
<div class="col_4">
<h3>Heading text</h3>
<p>This column takes up 1/3 of the page.</p>

</div>
<div class="col_4">
<h3>Heading text</h3>
<p>This column takes up 1/3 of the page. "omega" class removed. Padding-right of 24px, built into the grid, is being used.</p>

</div>
</div>
<div class="grid_12">
<div class="col_4 ">
<h3>Heading text</h3>
<p>Section text</p>

<p>This column takes up 1/3 of the page. "alpha" class removed from left column. This restores 24px of padding-left, which is styled into the grid.</p>

</div>
<div class="col_4">
<h3>Heading text</h3>
<p>Section text

<p>This column takes up 1/3 of the page.</p>

</div>
<div class="col_4 ">
<h3>Heading text</h3>
<p>Section text

<p>This column takes up 1/3 of the page. "omega" class removed. Padding-right of 24px, built into the grid, is being used.</p>

</div>
</div>

Tray 01

Praesent nunc metus, convallis ac interdum id, pretium varius urna. Nam rutrum, nunc in molestie vestibulum, arcu turpis auctor tellus, eget interdum nulla mauris et dolor. Aenean eget lectusporttitor, condimentum ex eu, varius neque. Sed vitae erat non metus hendrerit ornare.