Some HTML tips for creating grid layouts in Cascade.

Create a three-column grid with thumbnail and link text

<div class="grid3 fcm">
	<a href="">
           <img alt="" src="/render/file.act?path=/assets/images/photo.jpg" /> 
           Link text
        </a>
        <a href="">
           <img alt="" src="/render/file.act?path=/assets/images/photo.jpg" /> 
           Link text
        </a>
        <a href="">
           <img alt="" src="/render/file.act?path=/assets/images/photo.jpg" /> 
           Link text
        </a>
</div>

These classes grid2, grid3, grid4, grid5, grid6 can be used to set desired columns. The fcm class, which stands for First Child Margin, is required to reset the first child from the main CSS. The fcm class gives the first child the same margin as the rest of the children.

Use Span Classes

The grid2 class can be used for more flexibility. For example, let’s create a 3-column grid with one narrow column and a wide column:

<div class="grid3 fcm">
	<section></section>
        <section class="span2"></section>
</div>

These classes span2, span3, span4, span5 can be used to set desired span column.