Consider - The grid layout is used sparingly for landing pages, not sub-pages of sites.
Preferred limit a grid layout is 9 (3 x 3), optional: Banner area at top can be used.
Banner Area (Optional) | ||
Column 1 | Column 2 | Column 3 |
Column 4 | Column 5 | Column 6 |
Column 7 | Column 8 | Column 9 |
The grid layout is used to as a landing page, it allows you to highlight and display important areas, when you have many pages eg:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae imperdiet sem. Etiam porttitor eros id orci fermentum consequat. Pellentesque vestibulum, augue at placerat consectetur, sapien dui mattiulla odio sed ipsum. Pe
Creating the grid requires several page div's with specific start and end tags:
//Start Div
<div class="content-module-container-2-3"> <div class="content-module-full-wrap">
//Column 1 Div
content-module-1-4a-div
//Column 2 Div
content-module-1-4a-div
//Column 3 Div
content-module-1-4a-div
//End Div
</div><!-- end module wrap 1-->
</div><!--end content module container 1 -->
Testing content area
Testing content area
Testing content area
Testing content area
Testing content area
Testing content area
Testing content area
Testing content area
//BEGIN Landing rows
<div class="landing-rows">
//Row 1 (2/3 + 1/3)
<div class="modules-2-column">
<h2 class="red-heading">Module Heading - 2 column (.red)</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul>
</div>
<div class="modules-1-column">
<h2>Module Heading - 1</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul>
</div>
//Row 2 (full width)
<div class="modules-3-column">
<h2 class="orange-heading">Module Heading - 3 column (.orange)</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
//Row 3 (1/2 + 1/2)
<div class="modules-half-column">
<h2>Module Heading - Half column</h2> <p>Testing content area</p>
<ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
<div class="modules-half-column">
<h2 class="orange-heading">Module Heading - Half column</h2>
<p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
//Row 4 (1/3 + 1/3 + 1/3)
<div class="modules-1-column">
<h2>Module Heading - 1</h2> <p>Testing content area</p>
<ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
<div class="modules-1-column">
<h2>Module Heading - 1</h2> <p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
<div class="modules-1-column">
<h2>Module Heading - 1</h2> <p>Testing content area</p> <ul> <li>test</li> <li>test</li> <li>test</li> </ul></div>
//END Landing Rows
</div>