This PR adds support for CSS Grid Layout to Tailwind CSS.
Here is an example of what it looks like to use these new utilities:
<div class="grid grid-cols-8 col-gap-6 row-gap-6">
<div class="col-span-3"></div>
<div class="col-span-3"></div>
<div class="col-start-4 col-end-8"></div>
<div class="col-span-4 col-start-2"></div>
<div class="col-span-6 col-end-9"></div>
</div>
It adds a new grid
value to the display
core plugin, as well as provides new core plugins for the following CSS properties:
grid-template-columns
grid-column-gap
grid-column
grid-column-start
grid-column-end
grid-template-rows
grid-row-gap
grid-row
grid-row-start
grid-row-end
grid-template-columns
These utilities take the form grid-cols-{key}
where "key" is any value configured under the gridTemplateColumns
key in your theme config.
By default we provide the necessary values to create basic equal width column grids with up to 12 columns:
gridTemplateColumns: {
'1': 'repeat(1, 1fr)',
'2': 'repeat(2, 1fr)',
'3': 'repeat(3, 1fr)',
'4': 'repeat(4, 1fr)',
'5': 'repeat(5, 1fr)',
'6': 'repeat(6, 1fr)',
'7': 'repeat(7, 1fr)',
'8': 'repeat(8, 1fr)',
'9': 'repeat(9, 1fr)',
'10': 'repeat(10, 1fr)',
'11': 'repeat(11, 1fr)',
'12': 'repeat(12, 1fr)',
}
I've opted to avoid any weird magic here and instead just given the user complete control over the value of this property, so although I'm just using repeat(x, 1fr)
here for each value, there's absolutely nothing stopping you from creating something more custom like so:
gridTemplateColumns: {
// Would create a class called `grid-cols-header`
'header': '100px minmax(min-content, 600px) 1fr',
}
Providing a basic 12 column grid seemed like the most sensible thing to do by default, as there aren't many other good ideas I can think of that are actually general purpose and not hyper-specific to one site design.
grid-column-gap
These utilities take the form col-gap-{key}
where "key" is any value configured under the gridColumnGap
key in your theme config.
By default, this uses your spacing
config, and therefore matches all of your padding/margin/width/height utilities.
grid-column
These utilities take the form col-{key}
where "key" is any value configured under the gridColumn
key in your theme config.
By default we only provide values for spanning across columns:
gridColumn: {
'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',
}
Again no magic or assumptions here at all — I've included the word span
explicitly in each key to make sure the utilities are generated like col-span-5
for our default values, but you can totally do whatever you want here, like:
gridColumn: {
'logo-area': 'my-logo-area-label',
}
...to generate a class that fills a named column area like col-logo-area
.
The reason I've duplicated the value (like span 2 / span 2
) is so that you can easily override just the grid-column-start
or grid-column-end
value without losing the span
value, like this:
<div class="col-span-4 col-start-2"></div>
...which would create an element that spans 4 columns but starts at grid line 2.
grid-column-start
These utilities take the form col-start-{key}
where "key" is any value configured under the gridColumnStart
key in your theme config.
By default we only provide values that match the grid lines created by our default gridTemplateColumns
config:
gridColumnStart: {
'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',
},
grid-column-end
These utilities take the form col-end-{key}
where "key" is any value configured under the gridColumnEnd
key in your theme config.
By default we only provide values that match the grid lines created by our default gridTemplateColumns
config:
gridColumnEnd: {
'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',
},
grid-template-rows
These utilities take the form grid-rows-{key}
where "key" is any value configured under the gridTemplateRows
key in your theme config.
By default we do not provide any values for this utility at all:
gridTemplateRows: {}
That means no grid-rows-{key}
utilities are generated by default, and if you'd like to add them you need to customize your config.
This is because I just could not think of any sensible general purpose default values for this — any real-world use case I could come up with seemed too specific to a given design.
grid-row-gap
These utilities take the form row-gap-{key}
where "key" is any value configured under the gridRowGap
key in your theme config.
By default, this uses your spacing
config, and therefore matches all of your padding/margin/width/height utilities.
grid-row
These utilities take the form row-{key}
where "key" is any value configured under the gridRow
key in your theme config.
By default we do not provide any values for this utility at all:
gridRow: {}
That means no row-{key}
utilities are generated by default, and if you'd like to add them you need to customize your config.
This is for the same reason as grid-template-rows
.
grid-row-start
These utilities take the form row-start-{key}
where "key" is any value configured under the gridRowStart
key in your theme config.
By default we do not provide any values for this utility at all:
gridRowStart: {}
That means no row-start-{key}
utilities are generated by default, and if you'd like to add them you need to customize your config.
This is for the same reason as grid-template-rows
.
grid-row-end
These utilities take the form row-end-{key}
where "key" is any value configured under the gridRowEnd
key in your theme config.
By default we do not provide any values for this utility at all:
gridRowEnd: {}
That means no row-end-{key}
utilities are generated by default, and if you'd like to add them you need to customize your config.
This is for the same reason as grid-template-rows
.
What's not included
grid-auto-columns
utilities
grid-auto-rows
utilities
grid-auto-flow
utilities
grid-template-areas
utilities
If you think any of these are super important in a utility context, please reply with a good example and any ideas you have on how it should be included and we can definitely talk about getting it in.
Try it out
Here's a simple tailwind.run where I've thrown in the pre-compiled CSS so you can play with it:
https://tailwind.run/MSuVJB/1
Any feedback appreciated!