Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.
1
2
3
1
2
3
1
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus metus, ultrices vitae eros a, dapibus molestie tortor.
1
1
2
<!-- Grid 3 columns -->
<div class="Grid">
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box">
<p>1</p>
</div>
</div>
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box">
<p>2</p>
</div>
</div>
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box">
<p>3</p>
</div>
</div>
</div>
<!-- /Grid 3 columns -->
<!-- Grid 3 columns with gutter-->
<div class="Grid Grid--withGutter">
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box">
<p>1</p>
</div>
</div>
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box">
<p>2</p>
</div>
</div>
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box">
<p>3</p>
</div>
</div>
</div>
<!-- /Grid 3 columns with gutter -->
<!-- Grid columns equalHeight -->
<div class="Grid Grid--equalHeight">
<div class="Grid-cell u-size4of12">
<div class="sg-sample-box u-sizeFill">
<p>1</p>
</div>
</div>
<div class="Grid-cell u-size8of12">
<div class="sg-sample-box u-sizeFill">
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent metus metus, ultrices vitae eros a, dapibus molestie tortor.</p>
</div>
</div>
</div>
<!-- /Grid columns equalHeight -->
<!-- Grid columns equalHeight -->
<div class="Grid Grid--equalHeight">
<div class="Grid-cell u-md-size6of12 u-lg-size8of12">
<div class="sg-sample-box u-sizeFill">
<p>1</p>
</div>
</div>
<div class="Grid-cell u-md-size6of12 u-lg-size4of12">
<div class="sg-sample-box u-sizeFill">
<div class="Grid">
<div class="Grid-cell">
<div class="sg-sample-box">
<p>1</p>
</div>
</div>
<div class="Grid-cell">
<div class="sg-sample-box">
<p>2</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Grid columns equalHeight -->