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>