What’s The Difference Between Flexbox and CSS Grid And Why Should You Care?
By: Kelli Smith
If you’re reading this article, there’s a good chance you’d love to build better websites. But how about flexing the skills you need for:
- More than 30,000 responsive development jobs you can find on the Indeed job board alone?
- The high-paying salary and fascinating work that goes along with them?
- The potential to set your own schedule as a freelancer and/or work remotely from anywhere?
Advanced CSS tools can make all that possible for you. And this article will fill you in on the difference between Flexbox and CSS Grid, two of the most important tools you’ll need, and how you can use them to create amazing digital experiences.
And, if you’re excited to learn even more after this, join us for our advanced CSS course here at Skillcrush—coming soon!
Advanced CSS: Always Adaptable
Flexbox and CSS Grid are two fundamental parts of advanced CSS, which is simply a set of tools and techniques that allow you to more easily create websites for devices of all sizes. From phone screens a few inches wide to desktop screens spanning a few feet, displays today range hugely in size. And, no matter what screen size you’re viewing a site on, you want it to look and work beautifully. Advanced CSS gives you the power to create responsively without the need to manually write code for every possible screen size.
The way Flexbox and CSS Grid make these automatically adjusting displays possible is through the layout. You can use these systems to set up the structure of web pages, including where elements are placed, how they’re lined up, and how they’re rearranged when screen sizes change. Both Flexbox and CSS Grid let you easily do more than with other methods (like the dreaded tables of the early days of the web or the CSS float property you might already know), and each has its own extra-special superpowers that let you get your content in just the size and location you want it.
Flexbox: One Direction (Sorry, not the boy band!)
The main way you can use Flexbox is to place web content in either rows or columns and align accordingly. So, if your site is viewed on a phone, Flexbox will, for example, shrink down a set of photos so that ten of them fit in two columns of five images each. Yet when the same photos are viewed on a laptop, Flexbox will grow the images and adjust the line-up on the larger display to five columns of two images each. In other words, it’s ideal for when you want your content spread out evenly over a certain space.
CSS Grid: Multi-tasking Magic
CSS Grid mainly differs from Flexbox in that you can use it for content in multiple directions, i.e., both columns and rows. So, unlike Flexbox content that fills up the space available, CSS Grid content can be put exactly where you want it within the “grid” of columns and rows. This makes CSS Grid ideal for whole page layouts, while Flexbox might be a better fit for specific parts.
Flexbox and CSS Grid Together: Wonder Twin Powers Activate
Some layouts might be naturally best for Flexbox and others for CSS Grid. But sometimes the best choice is no choice! Using Flexbox for aligning content within certain elements and then CSS Grid to place all the elements precisely where and how you want them, you’ll get the advantages of both layout tools. And, of course, a gorgeous responsive site your users will love and your employers or clients will be happy to pay handsomely for!
She was both one of the first Skillcrush students and one of the first Skillcrush team members, starting as our customer support manager and now serving as our Senior Operations (aka HR and admin) Manager.
Kelli is a Texan living in Finland who loves podcasts, Corgis, emoji and gifs, diet Dr. Pepper, and – whenever possible and most of all! – practicing for and going to catalan style line dancing events all around Europe.