minmax() defaulting to max

by

In general, tracks will try to reach their max size:

If the free space is positive, distribute it equally to the base sizes of all tracks, freezing tracks as they reach their growth limits (and continuing to grow the unfrozen tracks as needed).

(In this context, “growth limit” is mostly a synonym for “max size in minmax()”.)

This happens to usually be what you want the track to do.

To get the effect you’re looking for, where it wraps tightly but won’t go above a certain limit, you can tweak what you’re doing a bit:

  • use minmax(50px, min-content) on the row sizes; this’ll wrap them tight to the contents, but won’t let them shrink below 50px.
  • use max-height: 150px on the actual grid items, so they’ll max out at 150px.

These two together should achieve the effect you want.

More Related Contents:

  1. Centering in CSS Grid
  2. Flex / Grid layouts not working on button or fieldset elements
  3. Center and bottom-align flex items
  4. Last margin / padding collapsing in flexbox / grid layout
  5. CSS Grid Layout not working in IE11 even with prefixes
  6. Equal width flex items even after they wrap
  7. How to center elements on the last row in CSS Grid?
  8. Grid properties not working on elements inside grid container
  9. Make a grid item span to the last row / column in implicit grid
  10. CSS grid square layout [duplicate]
  11. How to target a specific column or row in CSS Grid Layout?
  12. Grid areas not laying out properly in CSS Grid
  13. CSS grid – maximum number of columns without media queries
  14. Make row stretch across all columns in CSS Grid
  15. All widths set to width of widest element
  16. Make flex items overlap
  17. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  18. How to make images stay within the rows of a css grid container?
  19. Equal width columns in CSS Grid
  20. CSS grid wrapping
  21. How can I create a row-based masonry layout using CSS?
  22. Items that span all columns/rows using CSS grid layout
  23. Change the column order in a css grid
  24. How can I target a specific column or row in a CSS grid layout?
  25. Why does CSS Grid layout add extra gaps between cells?
  26. sticky position on css grid items
  27. How to flatten nested divs to display them in a CSS grid?
  28. What are the default values for justify-content & align content?
  29. CSS Grid with variable number of “auto” rows, but one row should take “1fr”
  30. How to calc() the number of rows in a grid template?

Leave a Comment