Skip to main content

Chassis v5.5.0

Width utilities

Width utilities are used to set percentage widths on elements, using the same 12-column system as the grid.

ch-width--12 (100%)
ch-width--6 (50%)
ch-width--4 (33%) md:ch-width--8 (66%)
sm:ch-width--7 (58%) md:ch-width--11 (92%)
sm:ch-width--5 (42%)
<div class="ch-width--12">ch-width--12</div>
<div class="ch-width--6">ch-width--6</div>
<div class="ch-width--4 md:ch-width--8">ch-width--4 md:ch-width--8</div>
<div class="sm:ch-width--7 md:ch-width--11">sm:ch-width--7 md:ch-width--11</div>
<div class="sm:ch-width--5">sm:ch-width--5</div>

Width auto

Use ch-width--auto to reset width values where required.

<div class="ch-width--auto"></div>
<!-- width: auto; -->

<!-- Responsive -->
<div class="[sl,sm,md,lg]:ch-width--auto"></div>