CSS Grid the newest of the display options for CSS, it is not a framework but an addition to the CSS language. It is supported by all of the newest versions of browsers and is backwards compatible by at least one, if not two, versions.

CSS Grid vs Flexbox

So what makes it different than CSS Flexbox?

If you are creating a basic grid layout with rows and columns and all you want is a single line or multiple lines wrapping back to back, CSS Flexbox is the way to go. But if you want a block to span the height of the two rows and take up three columns, you need something that is two-dimensional and has more options. That is where CSS Grid comes in. CSS Flexbox is a one-dimensional layout and CSS Grid is a two-dimensional layout. There are multiple options to customize the parent container and child items so you can create an exact layout and still have it flow nicely into a new grid layout for smaller screens.

CSS Grid Layout

Tips and Tricks

Using fr,  repeat, auto-fill and minmax is a life saver and can make creating grid layouts a whole lot easier. 1fr is a fractional unit for CSS Grid and can be interpreted as 1 part of the available space in the grid. 

So you can use it as:

See the Pen CSS Grid fr by Nathan Schmidt (@mrnathan8) on CodePen.

repeat allows you to write a large number of columns or rows that use the same grid layout, and when used with auto-fill and minmax you can create a layout that is fluid with the screen size without media queries.

See the Pen CSS Grid - auto-fill by Nathan Schmidt (@mrnathan8) on CodePen.

Can I start using it in a production site?

While CSS Grid if somewhat new, browsers have been adding support for it fairly quickly. As of writing this, caniuse.com is saying that CSS Grid has a total fully supported usage of 84%. Depending on your users and what browser they are using, the support may be higher or lower on your site. I always say, "you can’t use what you don’t know." So, start using it were it makes sense and provide a graceful degradation.

How to Get Started Using CSS Grid

The best way to get started is to look over the CSS Grid options on CSS-Tricks and familiarize yourself with the syntax. Then go to cssgrid.io and download the free course created by Wes Bos. It has 25 instructional videos with all of the starter files needed to get you started! Also Codepen.io has tons of pens created using CSS Grid, fork one and start editing the layout.

Sign Up For Our Newsletter!