25
TIL you can make a responsive calendar with just CSS Grid and no media queries
I was stuck trying to build a monthly calendar that fit on both phones and desktops, and I kept adding breakpoints for every screen size. Then I tried using grid-template-columns with auto-fit and minmax(100px, 1fr) and rows that just wrap naturally. Has anyone else found a crazy flexible layout pattern that cut down their media query count?
3 comments
Log in to join the discussion
Log In3 Comments
the_terry2d ago
100px was too tight for me so I bumped mine to 120px and that fixed the title overflow.
7
john_hunt22d ago
I mean, it works great until you've got a month with 31 days and a few long event titles that wreck the whole flow. I spent a whole evening tweaking those minmax values and still ended up with stuff overlapping on weird screen sizes.
2