How Works CSS Grid-Autoflow

CSS Grid : How Auto placement algorithm works

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:

0. Generate anonymous grid items
1. Position anything that’s not auto-positioned.
2. Process the items locked to a given row.
3. Determine the columns in the implicit grid.
4. 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.

grid-auto-flow: column cannot catch child div width with percentage value

So I used grid-auto-flow: column; but because of this property, the width of the child tag cannot work well.

You were was on the right way, but to get the same result as with Flexbox you need to:

Container style

1. Remove place-content: center;
2. Set grid-auto-columns: min-content;
3. Add grid-auto-flow: column;

export const Container = styled.div`
  width: 375px;
  display: grid;
  grid-auto-columns: min-content; /* changed */
  grid-auto-flow: column; /* new line */
  /* place-content: center; */ /* remove */
  align-items: center;
  grid-gap: 10px;
  border: 1px solid blue;
`;

After that we get other problem with the span line, because we have set grid-auto-columns: min-content; and all chidren elements should stack in one line with their own absolute width, but LineWithPercentage style has relative width. To fix this, we use calc() function, where we take width 375px from the Container style of and multiply by 0.42 (42%).

export const LineWithPercentage = styled.div`
  width: calc(375px * 0.42); /* 42% */
  border-bottom: 1px solid black;
`;

CSS grid wrapping

Use either auto-fill or auto-fit as the first argument of the repeat() notation.

<auto-repeat> variant of the repeat() notation:

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

---

auto-fill

When auto-fill is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then
the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.

^{https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Css grid auto-flow minmax with outer columns

You're overthinking this. Just give the ul left/right margin of 1vw and remove those grid-columns completely. Or even simpler, a width of 98vw and margin:auto

body, html {  margin: 0;  padding: 0;}
ul {  margin: auto;  width:98vw;  padding: 0;  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px , 1fr));  grid-gap: 0.5vw;}
li {  text-align: center;  list-style: none;  background: peachpuff;  padding: 0.5em;}

<ul>  <li>Grid Item</li>  <li>Grid Item</li>  <li>Grid Item</li>  <li>Grid Item</li>  <li>Grid Item</li>  <li>Grid Item</li></ul>

How can I set `height: auto` to a CSS grid container while using `grid-auto-flow: column`?

Here is a good answer why it is impossible to do it using display: grid;. So why should we? We have column-count for this task.

More about column-count and it's additional properties.

.sub-menu {
  margin: 0;
  padding: 2px;
  list-style: none;
  border-top: 1px solid;
  
  /* goodbye grid */
  column-count: 3;  
}

<ul class="sub-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>

<ul class="sub-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<ul class="sub-menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
</ul>

---

Related Topics