Building CSS Grids in TailwindCSS v1.2

5ec33da2bce87.html

<div class="grid grid-cols-2 lg:grid-cols-4 gap-6 w-full">
  <div class="col-span-1 bg-red-500">Row 1, Column 1</div>
  <div class="col-span-2 bg-blue-500">Row 1, Column 2, Span 2</div>
  <div class="col-start-1 col-end-2 lg:col-start-2 lg:col-end-4 bg-green-500">Row 2, Start 2, End 4</div>
  <div class="col-start-1 col-end-2 lg:col-end-4 bg-blue-500">Row 3, Start 1, End 4</div>
  <div class="col-start-2 col-end-2 lg:col-end-5 bg-red-500">Row 4, Start 2, End 5</div>
</div>

5ec33da2bce89.js

theme('spacing')

5ec33da2bce8a.json

none: 'none',
'1': 'repeat(1, minmax(0, 1fr))',
'2': 'repeat(2, minmax(0, 1fr))',
'3': 'repeat(3, minmax(0, 1fr))',
'4': 'repeat(4, minmax(0, 1fr))',
'5': 'repeat(5, minmax(0, 1fr))',
'6': 'repeat(6, minmax(0, 1fr))',
'7': 'repeat(7, minmax(0, 1fr))',
'8': 'repeat(8, minmax(0, 1fr))',
'9': 'repeat(9, minmax(0, 1fr))',
'10': 'repeat(10, minmax(0, 1fr))',
'11': 'repeat(11, minmax(0, 1fr))',
'12': 'repeat(12, minmax(0, 1fr))',

5ec33da2bce8b.json

auto: 'auto',
'span-1': 'span 1 / span 1',
'span-2': 'span 2 / span 2',
'span-3': 'span 3 / span 3',
'span-4': 'span 4 / span 4',
'span-5': 'span 5 / span 5',
'span-6': 'span 6 / span 6',
'span-7': 'span 7 / span 7',
'span-8': 'span 8 / span 8',
'span-9': 'span 9 / span 9',
'span-10': 'span 10 / span 10',
'span-11': 'span 11 / span 11',
'span-12': 'span 12 / span 12',

5ec33da2bce8c.json

'1': '1',
'2': '2',
'3': '3',
'4': '4',
'5': '5',
'6': '6',
'7': '7',
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',