Grid

Grids are helpful in creating fluid layouts that fit across multiple devices with difference resolutions. Chunks provides two column and three column layouts.

Two Column Grid

Left Column

Right Column


<div class="grid grid-gap grid-eq-2">
  <div class="grid-item accent-lighter">Left Column</div>
  <div class="grid-item accent-lighter">Right Column</div>
</div>

Three column Grid

Left Column

Middle Column

Right Column


<div class="grid grid-gap grid-eq-3">
  <div class="grid-item accent-lighter">Left Column</div>
  <div class="grid-item accent-lighter">Middle Column</div>
  <div class="grid-item accent-lighter">Right Column</div>
</div>

Autofit Grid

It tries to fit as many columns in the given space

Grid Item


<div class="grid grid-gap grid-eq-auto">
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
  <div class="grid-item accent-lighter">Grid Item</div>
</div>