Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Day 6: auto-fill and auto-fit

Dec 6, 2016

One of the nice things about flexbox is the ability to get the browser to lay out as many things as will fit into a container giving them all an equal flexible width. We can do the same with grid by using the auto-fill or auto-fit keywords along with repeat notation.

In this video from my video series, I demonstrate auto-fill and auto-fit, explaining the difference betwen the two.

What is this?

I’m sharing some tips to help you learn Grid Layout from the 1st of December until Christmas. Edited highlights from the things on this site and that I’ve posted elsewhere. Follow along!

If you find this style of learning useful then you might enjoy my online CSS Layout Workshop. I’m also available for in-house training, workshops and consultancy or conference speaking.

Back to Blog listing