Tailwind Grid Cheat Sheet

February - 2021

Gap

  • gap-# = gap on all sides
  • gap-x-# = gap on the left and right
  • gap-y-# = gap on the top and bottom

Numbers:

  • 1-4 by .5 steps
  • 5-12 by 1s
  • the rest of the numbers are below

List of Gap Options

gap-0   gap: 0px;
gap-x-0 column-gap: 0px;
gap-y-0 row-gap: 0px;
gap-0.5 gap: 0.125rem;
gap-x-0.5   column-gap: 0.125rem;
gap-y-0.5   row-gap: 0.125rem;
gap-1   gap: 0.25rem;
gap-x-1 column-gap: 0.25rem;
gap-y-1 row-gap: 0.25rem;
gap-1.5 gap: 0.375rem;
gap-x-1.5   column-gap: 0.375rem;
gap-y-1.5   row-gap: 0.375rem;
gap-2   gap: 0.5rem;
gap-x-2 column-gap: 0.5rem;
gap-y-2 row-gap: 0.5rem;
gap-2.5 gap: 0.625rem;
gap-x-2.5   column-gap: 0.625rem;
gap-y-2.5   row-gap: 0.625rem;
gap-3   gap: 0.75rem;
gap-x-3 column-gap: 0.75rem;
gap-y-3 row-gap: 0.75rem;
gap-3.5 gap: 0.875rem;
gap-x-3.5   column-gap: 0.875rem;
gap-y-3.5   row-gap: 0.875rem;
gap-4   gap: 1rem;
gap-x-4 column-gap: 1rem;
gap-y-4 row-gap: 1rem;
gap-5   gap: 1.25rem;
gap-x-5 column-gap: 1.25rem;
gap-y-5 row-gap: 1.25rem;
gap-6   gap: 1.5rem;
gap-x-6 column-gap: 1.5rem;
gap-y-6 row-gap: 1.5rem;
gap-7   gap: 1.75rem;
gap-x-7 column-gap: 1.75rem;
gap-y-7 row-gap: 1.75rem;
gap-8   gap: 2rem;
gap-x-8 column-gap: 2rem;
gap-y-8 row-gap: 2rem;
gap-9   gap: 2.25rem;
gap-x-9 column-gap: 2.25rem;
gap-y-9 row-gap: 2.25rem;
gap-10  gap: 2.5rem;
gap-x-10    column-gap: 2.5rem;
gap-y-10    row-gap: 2.5rem;
gap-11  gap: 2.75rem;
gap-x-11    column-gap: 2.75rem;
gap-y-11    row-gap: 2.75rem;
gap-12  gap: 3rem;
gap-x-12    column-gap: 3rem;
gap-y-12    row-gap: 3rem;
gap-14  gap: 3.5rem;
gap-x-14    column-gap: 3.5rem;
gap-y-14    row-gap: 3.5rem;
gap-16  gap: 4rem;
gap-x-16    column-gap: 4rem;
gap-y-16    row-gap: 4rem;
gap-20  gap: 5rem;
gap-x-20    column-gap: 5rem;
gap-y-20    row-gap: 5rem;
gap-24  gap: 6rem;
gap-x-24    column-gap: 6rem;
gap-y-24    row-gap: 6rem;
gap-28  gap: 7rem;
gap-x-28    column-gap: 7rem;
gap-y-28    row-gap: 7rem;
gap-32  gap: 8rem;
gap-x-32    column-gap: 8rem;
gap-y-32    row-gap: 8rem;
gap-36  gap: 9rem;
gap-x-36    column-gap: 9rem;
gap-y-36    row-gap: 9rem;
gap-40  gap: 10rem;
gap-x-40    column-gap: 10rem;
gap-y-40    row-gap: 10rem;
gap-44  gap: 11rem;
gap-x-44    column-gap: 11rem;
gap-y-44    row-gap: 11rem;
gap-48  gap: 12rem;
gap-x-48    column-gap: 12rem;
gap-y-48    row-gap: 12rem;
gap-52  gap: 13rem;
gap-x-52    column-gap: 13rem;
gap-y-52    row-gap: 13rem;
gap-56  gap: 14rem;
gap-x-56    column-gap: 14rem;
gap-y-56    row-gap: 14rem;
gap-60  gap: 15rem;
gap-x-60    column-gap: 15rem;
gap-y-60    row-gap: 15rem;
gap-64  gap: 16rem;
gap-x-64    column-gap: 16rem;
gap-y-64    row-gap: 16rem;
gap-72  gap: 18rem;
gap-x-72    column-gap: 18rem;
gap-y-72    row-gap: 18rem;
gap-80  gap: 20rem;
gap-x-80    column-gap: 20rem;
gap-y-80    row-gap: 20rem;
gap-96  gap: 24rem;
gap-x-96    column-gap: 24rem;
gap-y-96    row-gap: 24rem;
gap-px  gap: 1px;
gap-x-px    column-gap: 1px;
gap-y-px    row-gap: 1px;