CSS Grid vs Flexbox
Tags: beginners, css, web
Published: 2018-12-18 18:33:07

---
title: CSS Grid vs Flexbox
published: true
description: Which one should you use?
tags: beginner, css, web
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xsfy9ir4nbwhp8fe52y8.png
---

The main reason I wanted to learn CSS was because I was very interested in Responsive Web Design. I tried to use the 'float' method until [I discovered it was a bit outdated](https://stackoverflow.com/questions/9776840/are-floats-bad-what-should-be-used-in-its-place) and there were better options for a web layout.

I started using Flexbox to organize my layout. Until I discovered CSS Grid. But I was confused as Flexbox and CSS Grid are very similar and I didn't know when to use which. So, let me tell you what I learnt from my new research.

### The main difference
"Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts."

 ![One dimension example](https://cdn-images-1.medium.com/max/800/1*Ewh1fXubGWjA2GNaPGTYKw.png)

![Two dimensions example](https://cdn-images-1.medium.com/max/800/1*cdngZtVyxvxCt6pvDNcM9w.png)

### More differences
- CSS Grid’s approach is layout-first while Flexbox’s approach is content-first.
- Flexbox layout is most appropriate to the components of an application and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
- Tip: You can even combine these layout models. Note that you can use a Flexbox container inside a CSS Grid container (and vice-versa too!).
![Combination of Flexbox and CSS Grid](https://cdn-images-1.medium.com/max/1000/1*jy2Xh-3Uiv5-uBc0pprKBQ.jpeg)


### Examples
I created some time ago a tribute page as a project for the [FreeCodeCamp](https://www.freecodecamp.org/) curriculum. Fully responsive and made with Flexbox, in case you want to check how to use it.
{% codepen https://codepen.io/LeWanderer/pen/eLdQdO %} 

**Edit**: I also made the same project with CSS Grid, check it out.
{% codepen https://codepen.io/LeWanderer/pen/dwOLdQ %}


### Practice both!
[Thomas Park](https://github.com/thomaspark) has created two cute games to learn and practice [Flexbox](https://flexboxfroggy.com) and [CSS Grid](https://cssgridgarden.com).


### When I have doubts
[CSS Tricks](https://css-tricks.com/) has simple guides to use [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). I check them everytime I have a doubt or don't remember syntax.

### Browser Compatibility
You can check which browsers support Flexbox [here](https://caniuse.com/#feat=flexbox). Check [here](https://caniuse.com/#feat=css-grid) for CSS Grid compatibility.

Also check [implementing CSS grid in Internet Explorer](https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/)

### Sources
- [Cover photo](https://www.canva.com/guptaji)
- [Quote and information](https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf)
- [Images and information](https://medium.com/youstart-labs/beginners-guide-to-choose-between-css-grid-and-flexbox-783005dd2412)


### Thoughts
Which one do you use the most?

*Thank you for reading. Don't forget to follow me on dev.to and Twitter!*