html - CSS Grid : How Auto placement algorithm works

Question

Welcome To Ask or Share your Answers For Others

html - CSS Grid : How Auto placement algorithm works

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - CSS Grid : How Auto placement algorithm works

I was going through the example provided in MDN article on grid-auto-flow to understand how the auto-placement algorithm works in CSS grid.

Here's how the example is defined (you can change the select option to change value of grid-auto-flow property here):

function changeGridAutoFlow() {
  var grid = document.getElementById("grid");
  var direction = document.getElementById("direction");
  var dense = document.getElementById("dense");
  var gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  grid-gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column;
  /* or 'row', 'row dense', 'column dense' */
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="/static/build/styles/samples.37902ba3b7fe.css" rel="stylesheet" type="text/css" />
  <title>grid-auto-flow - Setting_grid_auto-placement - code sample</title>
</head>

<body>

  <div id="grid">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <div id="item4"></div>
    <div id="item5"></div>
  </div>
  <select id="direction" onchange="changeGridAutoFlow()">
    <option value="column">column</option>
    <option value="row">row</option>
  </select>
  <input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
  <label for="dense">dense</label>

</body>

</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:35:29+0000

If we are placing positioned items first, then in case of option set to row, why isn't explicitly placed item 4 (red) placed in the first row and 2nd column? Why does implicitly placed Blue get placed before it in second column? Also, this behavior is seemingly correct when option set to column

For this you need to refer to the specification and the full placement algorithm:

Generate anonymous grid items

Position anything that’s not auto-positioned.

Process the items locked to a given row.

Determine the columns in the implicit grid.

Position the remaining grid items.

The trick is that you think your element will be placed in the step (1) but no. Your element has only one explicit rule and the other is auto so it counts as an auto-positioned element.

If we follow the rules, we have no element to position in the step (1). We have one element to position in the step (2) which is #item1 since it's locked to a given row Then all the other elements are placed in the step (4) and the document order will define the placement:

For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:

You are not using the order property so the document order will be the reference.

Worth to note that the same apply to the column flow but the result was more intuitive because we first placed #item4 (column locked) then considering the document order we place the #item1 (not because this one had grid-row-start: 3;)

Why is auto-placement working differently in case of row and column values. In case of option column we start by filling columns, so why can't the first auto-placed item (item2 yellow) occupy the empty cell at row1, column1 position (like it does in case of option: row)

I think the explanation above cover this too. You need to follow the algorithm which behave differently in both cases:

To aid in clarity, this algorithm is written with the assumption that grid-auto-flow has row specified. If it is instead set to column, swap all mentions of rows and columns, inline and block, etc. in this algorithm.

Categories

html - CSS Grid : How Auto placement algorithm works

html - CSS Grid : How Auto placement algorithm works

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags