Can auto margins work in CSS Grid like they do in Flexbox?

Question

As far as I understand, anything flexbox can do, css-grid should also be able to do (usually more verbosely).

Yet I cannot figure out how to mimic a flexbox with an

Answer 1

You need to make use of grid-template-rows which is used to declare the area occupied by each row where

• minmax(1px, auto) defines that the minimum height is 1px and maximum height can be expanded as the content increases dynamically for the first 3 li.
• 1fr is 1 fraction of the entire remaining space for 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;
}

  
1
  
2
  
3
  
4

On a further note, CSS Grid doesn't really replace the need of flexbox. https://css-tricks.com/css-grid-replace-flexbox/