The inspiration for this came from Kevin Powell’s videoes Flexbox design patterns you can use in your projects and Masonry layout with CSS only! His video are very useful so check them out.
Side by Side using
This works and is responsive.
Grid Pattern using
What if we want an n by m matrix style layout?
If it is important to keep the number of columns fixed we use percentages in
flex-basis, otherwise we can use widths in absolute units. In any case the number of columns will change if the screen width become too small for all of the cells to keep their content. In that case you will end up with a bunch of whitespace to the left because the cells aren’t allowed to grow.
flex-grow: 1 we get rid of the whitespace, but the cells in the bottom row may now have a different width than the rest of the cells. So if having equal cell width is important avoid using grow.
Masonery Pattern using
Sometimes you want there to be structure without everything falling into a neat grid. This kind of layout can be called a masonery pattern.
One of the neat things about this approach is that it lets you get a
Some of the approaches described above can be used together to form nested structures. Below I’ve used the flexbox grid layout twice. Here I’ve set a minimum width of 300px on all the children of the outer grid. This means that the righthand column will go below the left column rather than squeeze everything together.
I’ve used this my Local Real Estate Prices post.