Answers for "css grid items grow to available space"

css grid column height fit content

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
}
 /* ---OR--- */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

how to use a blank space with grid template areas css

.container {
  display: grid;

  grid-template-columns: 2fr 2fr 1fr 2fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
    "head head . side"
    "main main . side"
    "footer footer footer footer";
}