Equal width columns in CSS Grid

by

TL;DR

grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;

The common answer of repeat(3, 1fr) is not quite correct.

This is because 1fr is about the distribution of available(!) space. This breaks as soon as the content becomes bigger than the track size. By default, it does not overflow and adjust the column width accordingly. That’s why not all 1fr are guaranteed to be of equal width. 1fr is actually rather just a shorthand for minmax(auto, 1fr).

If you really need the columns to be the exact same width you should use:

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax(0, 1fr) allows the grid tracks to be as small as 0 but as large as 1fr, creating columns that will stay equal. But, be aware that this will cause overflows if the content is bigger than the column or cannot be wrapped.

Here is an example that demonstrates the difference.

Finally, as @wegry and @zauni pointed out, to make it work for any number of child columns, you can take advantage of grid-auto-columns and grid-auto-flow and use this:

grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;

More Related Contents:

  1. Grid properties not working on elements inside grid container
  2. Items that span all columns/rows using CSS grid layout
  3. How to make CSS Grid items take up remaining space?
  4. CSS-only masonry layout
  5. Center and bottom-align flex items
  6. Last margin / padding collapsing in flexbox / grid layout
  7. Make grid container fill columns not rows
  8. CSS Grid Layout not working in IE11 even with prefixes
  9. Equal width flex items even after they wrap
  10. How to center elements on the last row in CSS Grid?
  11. minmax() defaulting to max
  12. Preventing double borders in CSS Grid
  13. Why is my Grid element’s height not being calculated correctly?
  14. Bootstrap 4 row fill remaining height
  15. Why display grid with 100% in grid-template-columns goes out of body?
  16. Make row stretch across all columns in CSS Grid
  17. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  18. Understanding grid negative values
  19. grid-auto-flow in snake lines?
  20. CSS grid wrapping
  21. How can I create a row-based masonry layout using CSS?
  22. Change the column order in a css grid
  23. How can I target a specific column or row in a CSS grid layout?
  24. sticky position on css grid items
  25. How to flatten nested divs to display them in a CSS grid?
  26. How do browsers calculate width when child depends on parent, and parent’s depends on child’s
  27. What are the default values for justify-content & align content?
  28. How to make a fixed column in CSS using CSS Grid Layout?
  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