If you want a grid row to have a minimum height but grow with content, which approach is correct?

If you want a grid row to have a minimum height but grow with content, which approach is correct?

• A. grid-auto-rows: minmax(100px, auto)
• B. grid-template-rows: 100px
• C. align-content: center
• D. grid-auto-flow: dense

Answer: (A)

Row heights can be set to a minimum and still grow with content by using a minmax track size. When you apply grid-auto-rows: minmax(100px, auto), every implicit row starts at a minimum height of 100px but can expand to accommodate its content. This means you get a consistent base height while still letting the row stretch if more space is needed. If a row is defined explicitly with grid-template-rows, you could use the same idea there (grid-template-rows: minmax(100px, auto)) to achieve the same growth behavior for those tracks. The alternative grid-template-rows: 100px fixes the height, so it won’t grow with larger content. Align-content centers the grid within the container and doesn’t affect row heights, and grid-auto-flow: dense only changes how items are placed, not how tall rows become.

Row heights can be set to a minimum and still grow with content by using a minmax track size. When you apply grid-auto-rows: minmax(100px, auto), every implicit row starts at a minimum height of 100px but can expand to accommodate its content. This means you get a consistent base height while still letting the row stretch if more space is needed.

If a row is defined explicitly with grid-template-rows, you could use the same idea there (grid-template-rows: minmax(100px, auto)) to achieve the same growth behavior for those tracks. The alternative grid-template-rows: 100px fixes the height, so it won’t grow with larger content. Align-content centers the grid within the container and doesn’t affect row heights, and grid-auto-flow: dense only changes how items are placed, not how tall rows become.