Grid
You can create a grid layout by specifying the uc-grid class.
1. Basic
Create a grid layout.
Set uc-grid as the parent element and uc-grid-child as the child element.
You can also apply margins by adding the _gutter class.
<div class="uc-grid _gutter">
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box1</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box2</div>
</div>
</div>
2. Adjust column width
You can fit the width by specifying _col-fit, and you can place it in the full width by specifying _col-full.
<!-- Adjust the width according to the number of elements. -->
<div class="uc-grid _col-fit _gutter">
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box1</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box2</div>
</div>
</div>
<!-- Place it across the full width. -->
<div class="uc-grid _col-full _gutter">
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box1</div>
</div>
</div>
3. Specify the number of columns
To modify the number of columns, specify the _col-{2...12} class.
For example, in the next sample you can place it in four columns.
<div class="uc-grid _col-4 _gutter">
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box1</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box2</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box3</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box4</div>
</div>
<!-- It can also be specified as `uc-grid-cell`. -->
<div class="uc-grid-cell _col-fit">
<div style="padding:3em;background:white">box5</div>
</div>
<div class="uc-grid-cell _col-fit">
<div style="padding:3em;background:white">box6</div>
</div>
</div>
4. Responsive
By specifying class _small-col-{full | fit | 2...12} or _medium-col-{full | fit | 2...12},
you can change the number of columns according to screen size.
_small-col is applied when the screen width is 768px or less, and _medium-col is applied in the case of 769px to 1199px.
In the next sample, it is changed to 3 columns when the width is 1200px or more,
2 columns when 1199px to 769px, and 1 column (full) when the width is 768px or less.
<div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter">
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box1</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box2</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box3</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box4</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box5</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:white">box6</div>
</div>
</div>
5. Use in combination
By combining various patterns, it is also possible to generate complicated grids.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="uc-grid _nowrap">
<div class="uc-sidebar uc-grid-cell">
<div class="uc-sidebar-wrap">
<div class="uc-sidebar-list">
<p><strong>Sidebar</strong></p>
<a href="#">Menu1</a>
<a href="#">Menu2</a>
<a href="#">Menu3</a>
<a href="#">Menu4</a>
<a href="#">Menu5</a>
</div>
</div>
</div>
<div class="uc-grid-cell _col-fit">
<div class="uc-section">
<div class="uc-section-title">Lorem ipsum dolor sit amet.</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="uc-grid-unit">
<div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter">
<div class="uc-grid-cell">
<div style="padding:3em;background:#eee">box1</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:#eee">box2</div>
</div>
<div class="uc-grid-cell">
<div style="padding:3em;background:#eee">box3</div>
</div>
</div>
</div>
</div>
</div>
</div>