A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid

In this tutorial, I’ll be going over all the steps the auto-placement algorithm of the CSS Grid Layout module follows when positioning elements. These steps are controlled by the grid-auto-flow property.

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.

Here, I am going to show you how this algorithm works. This way, the next time an element ends up in an unexpected location, you are not left scratching your head wondering what just happened.

Basic Concepts for a Better Grasp of the Auto-placement Algorithm

Let’s go over some fundamental concepts before diving into the workings of the algorithm.

  • Anonymous grid items – If you place some text directly inside a grid container without wrapping it in any tag, it will form its own anonymous grid item. You can’t style an anonymous grid item because there is no element for you to style, but it still inherits style rules from its parent container. On the other hand, note that white space inside the grid container will not create its own anonymous grid item
  • Value of grid spans – Unlike grid positions, the algorithm has no special rules to resolve the value of grid spans. If not explicitly specified, their value is set to 1 (the item only occupies its own cell)
  • Implicit grid – The grid built on the basis of the value of properties like grid-template-rows, grid-template-columns and grid-template-areas is called explicit grid. Now, if you specify the position of a grid item in such a way that it lies outside the bounds of the explicit grid, the browser will generate additional grid lines to accommodate the item. These lines, along with the explicit grid, form the implicit grid. You can read more about it in Where Things Are at in the CSS Grid Layout Working Draft. The auto-placement algorithm can also result in the creation of additional rows or columns in the implicit grid.

Finally, I’d like to make the following preliminary point. The default value of the grid-auto-flow property, which is the property controlling the algorithm, is row. This is also the value I am going to assume in the following explanation of the auto-placement algorithm. On the other hand, if you explicitly set the above property to column, remember to replace instances of the term row with the term column in my explanation of the algorithm. For example, the step “Placement of Elements With a Set Row Position but No Set Column Position” will become “Placement of Elements With a Set Column Position but No Set Row Position”.

Now, enable the experimental features flag in your favorite modern browser to follow along and let’s go over the details of all the steps the algorithm follows to build the layout.

Step #1: Generation of Anonymous Grid Items

The first thing that happens when the algorithm is trying to place all the items inside a grid is the creation of anonymous grid items. As I mentioned earlier, you cannot style these elements because there is no item to apply the style to.

The markup below generates an anonymous grid item from the inter-element text:

Read Full Article

Leave a Reply

Your email address will not be published. Required fields are marked *