Jump to content

Grid auto-placement differences arising from grid-auto-flow


Recommended Posts

The following codepen illustrates positioning items using grid-column-start: grid-areaname. It sets grid-auto-flow to column and works as I expect. It is from the quackit page on grid-column-start.

#grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
    "a b c"
    "d e f"
    "g h i";
  grid-auto-flow: column;
  grid-gap: 1px;

#grid > div:nth-child(4) {
  grid-column-start: f;
  background: limegreen;
<div id="grid">


However, when I set grid-auto-flow to row (the default value), a gap is left in the layout, for the auto-placed items, as seen in the following codepen:

Why does this difference in behavior occur?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...