Simple responsive CSS Grid
In the past, I only used CSS Grid occasionally. While it was very helpful to solve some layout problems, it sometimes felt a bit redundant. Especially when it comes to repetitive responsive settings.
My first attempt towards building this photo grid layout was similar to my previous attempts using css grids. It felt a bit strict and not flexible. After some research, I came across a rather perfect way of defining the grid items. Now the browser would do all the heavy lifting:
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
Cool, but what does this mean?
- Create a grid
- Set the gap between each column and row to
- Set the minimum width of every column to
- Every column should have the same width
- Fill the grid container with as many columns as possible
This is the perfect way of handling this grid. It is pure flexibility while also depending on a reasonable minimum size of all its children.
One recent article on CSS-Tricks called Thinking in Behaviors, Not Screen Sizes describes a very similar example. The notion of thinking more in behaviors rather than breakpoints is a perfect summary of this neat way of handling grids.