CSS grid: automatic element positioning-CodePudding

I'm learning the CSS grid technique. Now I don't understand the following behavior (see code snippet):

In "example 1", the element b has no grid-row definition. The element c and d follows after the element b (c and d flows after element c, starting directly after element b).

In "example 2" the element b has the grid-row: 4 / 5; definition. Here is the element c in the second row in the first column (between line 2 and line 3), the element d is in the second row in the last column (between line 3 and line 4).

Why is that so? I would have expected the same result in "example 2" as in "example 1". I would have expected the result in "example 2" if I had defined grid-auto-flow: row dense;.

.grid{
  display: grid;
  grid-template-columns: repeat(3 , 100px);
  grid-template-rows: repeat(5 , 50px);
  grid-gap: 10px;
}
.title{
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}
.a{
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}
.b{
  grid-column: 1 / 3;
}
.grid:nth-child(2) .b{
  grid-row: 4 / 5;
}


/* the code below is not necessary, it is only to style the example */
html,body{
  margin:0;
  padding:0;
}
.wrapper{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  border:1px solid black;
}
.grid{
  border:1px solid black;margin:10px;float:left;
}
.grid div{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:#ff5533;
  border:1px solid #dd2200;
  border-radius:5px;
  font-size:20px;
  font-weight:bold;
}
.grid div.c,
.grid div.d{
  background-color:#ffee00;
  border:1px solid #aaaa00;
}

<div >
  <div >example 1</div>
  <div >a</div>
  <div >b</div>
  <div >c</div>
  <div >d</div>
</div>

<div >
  <div >example 2</div>
  <div >a</div>
  <div >b</div>
  <div >c</div>
  <div >d</div>
</div>

CodePudding user response：

To understand such behavior you need to follow the full placement algorithm from the specification: https://www.w3.org/TR/css-grid-1/#auto-placement-algo

We have different steps and the most important ones are the following:

(1) Position anything that’s not auto-positioned.

(2) Process the items locked to a given row.

(4) Position the remaining grid items.

Now you need to identify the "not auto-positioned" items and they are the ones that have an explicit grid-row and grid-column (or grid-area). In other words, we know their exact position in the column and row. If you only define the row OR the column then those items are no more "not auto-positioned".

In your first case, only A (and title) belong to this category so we place them at step (1) then we move to the next step "Process the items locked to a given row.". We have not items in this category so we move to the step (4)

In this step, we will consider the "sparse" algorithm so we first place B in the first area that can hold it then C then D. The "sparse" algorithm doesn't allow us to get back to fill the holes so you get the result you have.

Now if we consider the second case, your B element will have a row and column so it will belong to the "not auto-positioned." items and will get placed at the step (1) like A and Title.

Then we position the remaining items at the step (4) and we will start with the first empty grid cell that can hold our first item in the list (the C item) and we can place it in the first row/column.

The auto-placement cursor defines the current “insertion point” in the grid, specified as a pair of row and column grid lines. Initially the auto-placement cursor is set to the start-most row and column lines in the implicit grid.

So the difference between both cases is that the B element will get placed at different steps but at the same place. This will have an impact on the remaining items. If it's placed at the step 3 it will be in the same list as C and D but if placed at step 1 it will belong to another list which will place C and D differently.