TIL you can use CSS Grid to make a responsive calendar without media queries

A buddy of mine who does frontend told me to try auto-fill with minmax for a calendar layout. I was stubborn and kept using flexbox with a bunch of breakpoints. Finally gave his idea a shot last night for a client project - set the grid to repeat(auto-fill, minmax(120px, 1fr)) and it just worked. Each day cell resized itself depending on screen width, no extra code needed. Anyone else find a weird use case where auto-fill saved you time?

2 comments

2 Comments

robinmason8d ago

Yeah, and here I was manually adjusting 12 breakpoints like a sucker.

angela_wilson788d ago

Did you at least make a spreadsheet to track them all? I tried that once with a side project and it turned into a mess of notes I couldn't even read. @robinmason you're not alone, I spent a whole weekend fixing padding on a tablet view only to realize nobody uses that size screen anyway.