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>