Skip to content

Grid

The If Design System includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. The grid comes with multiple tiers, one tier for each breakpoint (media query range).

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
Edit this section

How it works

.if.col-4--xs
.if.col-4--xs
.if.col-4--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-3--xs
.if.col-6--xs
.if.col-6--xs
.if.col-2--xs
.if.col-6--xs
.if.col-4--xs
<div class="if [grid OR container] [fluid|across|wide]">
  <div class="if row">
    <div class="if col-[1-12]--[xxs|xs|smlr|sm|md|lg|xl|xxl|huge|huger]">..</div>
  </div>
</div>
Edit this section

Contact us