July 7, 2021
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>
Tufts Meal Plan Wrapped
Mar 2, 2024
Building an e-ink picture frame that displays an iCloud photo album
Jan 9, 2024
2023 in review
Jan 5, 2024
Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iām working on!