How to create custom CSS Grids with Tailwind JIT mode

If you have just-in-time compiler activated for Tailwind CSS, 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>