Can automatic fields work in CSS Grid, as in Flexbox?

Question

As far as I understand, something flexbox can do, css-grid should also be capable (usually in more detail).

But I can't figure out how to mimic a flexbox with an element repelling the rest with margin: auto

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Run codeHide result

See how all cells have a size for their contents, and the latter lirepels the rest at the end?

How can I do this using css-grid without changing my html to add an element?

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Run codeHide result

This is close, but all the lines have no size min-content- I have no idea what they are designed for, but not min-content. The closest I can do is add

grid-template-rows: repeat(3, min-content);

which works, but only if you know the amount liahead of time, which is not required for the flexbox version.

Answer 1

, , .

. , , 99 :

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 150px;
  background-color: lime;
  grid-template-rows: repeat(99, max-content) 1fr [last];
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  grid-row: last;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Hide result

Answer 2

, flexbox :

• flex
• flex.

CSS Grid :

• ,
• / ( "" )
• ( ).

auto flex, . , . .

auto , ( ). , auto.

Grid. margin-top: auto . Flex .

Grid flexbox, , , , - item.

, , flexbox, . , Grid, .

auto , , flexbox. grid-row-gap. . auto .

CSS Grid flexbox. , . , flex , Grid. .

, flexbox :

• ?
• css

Answer 3

grid-template-rows, ,

• minmax (1px, auto) , 1px, 3 li.
• 1fr - 1 last li.

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  outline: 1px solid red;
  height: 200px;
  background-color: lime;
  grid-template-rows: minmax(1px, auto) minmax(1px, auto) minmax(1px, auto) 1fr;
}

li {
  background-color: cornsilk;
}

li:last-of-type {
  margin-top: auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Hide result

: CSS Grid flexbox.  https://css-tricks.com/css-grid-replace-flexbox/