A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid
This tutorial talks you through the reasons why things do what they do so when they do it…. you will understand why.
CSS Grid Layout is something that is fairly new to most people but wide browser support is imminent. Just like there was a swathe of Responsive Redesigns when RWD first became the ‘thing to do’ I can see that a lot of websites will go back over their existing design and recreate it with CSS Grid.
This approach will allow developers to get a handle on the syntax and allow them to work out fallbacks and ensure cross-browser support. Once that’s has been mastered it will be over to the designers to really start pushing the limits of web design.a
In Introducing the CSS Grid Layout and Seven Ways You Can Place Elements Using CSS Grid Layout, I gave an overview of the CSS Grid spec and explained all the different ways Grid lets you arrange elements on the web. However, in my previous articles I explicitly specified the position of just one element in the grid. As for the rest of the items, they got placed properly based on an algorithm.
An excerpt from A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid
