Grid

Examples and Documentation of building grid layouts with LittleGiant
Live Editor
<>
  <div class="lil-flex lil-mb-2">
    <div class="lil-w-1/2 lil-bg-grey-300 lil-text-white lil-p-2">Width 1/2</div>
    <div class="lil-w-1/2 lil-bg-grey-200 lil-text-white lil-p-2">Width 1/2</div>
  </div>
  <div class="lil-flex lil-mb-2">
    <div class="lil-w-1/3 lil-bg-grey-300 lil-text-white lil-p-2">Width 1/3</div>
    <div class="lil-w-1/3 lil-bg-grey-200 lil-text-white lil-p-2">Width 1/3</div>
    <div class="lil-w-1/3 lil-bg-grey-100 lil-text-black lil-p-2">Width 1/3</div>
  </div>
  <div class="lil-flex lil-mb-2">
    <div class="lil-w-1/4 lil-bg-grey-400 lil-text-white lil-p-2">Width 1/4</div>
    <div class="lil-w-1/4 lil-bg-grey-300 lil-text-white lil-p-2">Width 1/4</div>
    <div class="lil-w-1/4 lil-bg-grey-200 lil-text-black lil-p-2">Width 1/4</div>
    <div class="lil-w-1/4 lil-bg-grey-100 lil-text-black lil-p-2">Width 1/4</div>
  </div>
</><>
  <div class="lil-flex lil-mb-2">
    <div class="lil-w-1/2 lil-bg-grey-300 lil-text-white lil-p-2">Width 1/2</div>
    <div class="lil-w-1/2 lil-bg-grey-200 lil-text-white lil-p-2">Width 1/2</div>
  </div>
  <div class="lil-flex lil-mb-2">
    <div class="lil-w-1/3 lil-bg-grey-300 lil-text-white lil-p-2">Width 1/3</div>
    <div class="lil-w-1/3 lil-bg-grey-200 lil-text-white lil-p-2">Width 1/3</div>
    <div class="lil-w-1/3 lil-bg-grey-100 lil-text-black lil-p-2">Width 1/3</div>
  </div>
  <div class="lil-flex lil-mb-2">
    <div class="lil-w-1/4 lil-bg-grey-400 lil-text-white lil-p-2">Width 1/4</div>
    <div class="lil-w-1/4 lil-bg-grey-300 lil-text-white lil-p-2">Width 1/4</div>
    <div class="lil-w-1/4 lil-bg-grey-200 lil-text-black lil-p-2">Width 1/4</div>
    <div class="lil-w-1/4 lil-bg-grey-100 lil-text-black lil-p-2">Width 1/4</div>
  </div>
</>
Result
Width 1/2
Width 1/2
Width 1/3
Width 1/3
Width 1/3
Width 1/4
Width 1/4
Width 1/4
Width 1/4
Similarly, more widths can be assigned to an element
#Grid

Grid
