Building CSS Grids in TailwindCSS v1.2

Support for CSS grids has been added to Tailwind v1.2. Here's a little example:

Example

Row 1, Column 1

Row 1, Column 2, Span 2

Row 2, Start 2, End 4

Row 3, Start 1, End 4

Row 4, Start 2, End 5

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

Tailwind provides support for a lot of CSS grid properties out of the box, but a lot of them don't have default values. The default values are based around a 12-column grid.

gap-*

Default values for gap are the spacing values setup in your configuration (same as margin, padding, etc).

1theme('spacing')

row-gap-*

There are no default values for the row-gap classes.

col-gap-*

There are no default values for the column gap classes.

grid-cols-*

The grid-cols-* sets the grid-template-columns and is used on the grid wrapper to tell the grid how many columns it should support. Default values:

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

col-*

The col-* class sets the grid-column property, and tells the element how many columns it should span across. Default values:

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

col-start-* / col-end-*

The col-start-* and col-end-* sets the grid-column-start and grid-column-end properties on the element. These tell the element where which column to start and end at, respectively. Default values:

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

grid-rows-*

The grid-rows-* sets the grid-template-rows on the element, and is used on the grid wrapper to tell the element how many rows are in the grid. There are no default values.

row-*

The row-* sets the grid-row property on the element, telling it which rows to occupy. There are no default values.

row-start-* / row-end-*

The row-start-* and row-end-* sets the grid-row-start and grid-row-end properties on the element. These tell the element where which row to start and end at, respectively. There are no default values.

Building CSS Grids in TailwindCSS v1.2

Thanks for reading this article!