Jump to content

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


SSteven

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;
  grid-template-areas:
    "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">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

 

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...