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.