Great snippets working like a charm
Date:
This article is a collection of famous code snippets that work like a charm :)
1. Flexible Grids
Grid is handy to create a grid system with responsiveness, It would be even nicer if the number of columns were based on how many elements could fit without breaking the width of the parent, then doing that for the rest of the grid.
That leads us to perhaps the most famous and useful code in all of CSS grid:
Working demo: https://codepen.io/chriscoyier/pen/GRpxXKw
Also note that the minimum value used here is 200px for each column. That’s just some number that you’d pick that feels good for your content. If that number was, say, 400px instead, you might consider an alteration that allows it to go smaller if the screen itself is smaller than that wide. I first saw this trick from Evan Minto:
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));Reference: https://css-tricks.com/books/greatest-css-tricks/flexible-grids/