I am slowly starting to appreciate the versatility of the CSS Grid layout module. For instance, in this commit I replaced a flex grid that required finicky media queries and margin gymnastics with essentially three lines of code using grid. Here is a variable-free version of what I ended up with:
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
grid-gap: 1rem;The result can be seen here. Not only this achieves the exact same result as my previous flex solution, but it is cleaner and doesn’t use any media queries. Sign me up!