Flexbox vs. Grid System
A few years ago, I decided to make a simple, static website for my church, and I wanted to make sure it was mobile responsive as most people use their phones these days. I was fairly proficient at HTML and CSS, but had never made a mobile responsive site before, so I did a little research and found a free course online. The course taught the basics of Bootstrap and how to use their framework to create rows and columns with known breakpoints to make the site responsive. This took a lot of divs making the rows with the correct number of columns in each row. I understood what I needed to do to make it work, but didn’t really understand what was going on, since Bootstrap did all the heavy lifting… I only had to add the correct classes and columns I wanted and it made magic happen.
Fast forward to today. I am in Devslopes’ Web Academy, and have just gone over the Grid system and Flexbox. Needless to say, if I had had this years ago, I would have had my church’s website done in days (not that it took me that terribly long, but you get me).
The Grid System
The Grid system is great to use if you have a lot of different ‘containers’ of information that you need placed on the screen, in a seemingly random way. You can utilize the grid-template-areas property and specify exactly how you want different containers to appear in the grid. This is great to use for 2-dimensional work, or to create an overall system to start off a responsive design. You can also use the grid-gap property to set the width you want between your grid items.
Below you can see how I used the grid-template-areas property to create this masonry grid system of photos from Unsplash.
Flexbox
Flexbox took me a little longer to get the hang of, but after I did, WOW! Flexbox, when used right, can make the responsive part of a website so easy. This implementation of displaying content is used for a 1-dimensional display. You can take block items, and display them as flex items, and then they align in a pretty little row. You can also have them in a column using the flex-direction property if you want things stacked on top of each other. This makes making a website mobile-friendly, very easy.
To utilize Flexbox in a responsive design, use the flex-wrap property along with the wrap value, and as your viewport shrinks, your content will wrap below itself. Then with a few media queries, you can adjust any padding and the grid-gap to be appropriate for smaller screens.
Final Thoughts
If you find you really love the grid system, you can make an entire site responsive using it, but I found that using the grid system as an overall container and then placing flex containers and items inside gave me the best overall experience with the least amount of effort. I may even go back and update my church’s website with this new knowledge!
As I continue on my journey learning about web development, I’m sure I will have more to add to this responsive thought, but for now using the grid system along with flexbox has been great!
