How to create custom CSS Grids with Tailwind JIT mode

July 7, 2021

If you have just-in-time compiler activated for TailwindCSS, you can now define custom CSS grid layouts just using utility classes that are generated on the fly.

To use it, just list out the measurements you would normally write with a comma in between.

Instead of this CSS:

display: grid;
grid-template-rows: 2.5rem max-content 1fr;

You can use these classes:

<div class="grid grid-rows-[2.5rem,max-content,1fr]"></div>

This has some benefits, such as being able to apply different grid layouts at different breakpoints:

<div class="grid grid-rows-[1rem,1fr] sm:grid-rows-[2.5rem,1fr]"></div>

A quick favor: was anything I wrote incorrect or misspelled, or do you still have questions? Please use this form to let me know or ask for help!