What is the difference between min-content and max-content in a CSS Grid row?

user_5388390 0
Viewed 541

While I can see a difference between min-content and max-content values for the column size, when the text breaks with min-content and stretches as much as possible with max-content values, I don't see that effect in a row. Either the row size is defined with min-content or max-content, it seems not to take any effect. Is there any other practical use of min-content and max-content for the rows in a grid layout?

ul{
  list-style-type: none;
  width: 400px;
  height: 200px;
  padding: 0;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content max-content;
  box-shadow: 2px 2px 6px grey;
}

li:nth-child(1){
  background-color: #b9e2ff;
}

li:nth-child(2){
  background-color: #ffa733;
}

li:nth-child(3){
  background-color: #8b33ff;
}

li:nth-child(4){
  background-color: #ff3333;
}
<ul>
  <li>hello world hello world hello world hello world</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello world hello world hello world hello world</li>
</ul>

css-grid css
1 Answers

You won't really see a difference since in most of the case, the width is first defined based on the text then the height will get computed later.

You may see a difference if you have a vertical text where the logic is inverted:

ul{
  list-style-type: none;
  width: 400px;
  height: 200px;
  padding: 0;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: min-content max-content;
  box-shadow: 2px 2px 6px grey;
}
li {
    writing-mode: vertical-lr;
}
li:nth-child(1){
  background-color: #b9e2ff;
}

li:nth-child(2){
  background-color: #ffa733;
}

li:nth-child(3){
  background-color: #8b33ff;
}

li:nth-child(4){
  background-color: #ff3333;
}
<ul>
  <li>hello world hello world hello world hello world</li>
  <li>hello</li>
  <li>hello</li>
  <li>hello world hello world hello world hello world</li>
</ul>

user_86203330
Related