30

Basically, I do not understand why this works:

.grid {
  display: grid;
  grid-template-columns: repeat(4, min-content);
}

But this doesn't work:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, min-content);
}

I really wish to make the latter functionality possible. Are there other ways to make it work?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
timetowonder
  • 5,121
  • 5
  • 34
  • 48

2 Answers2

25

The second rule doesn't work because min-content is an intrinsic sizing function.

§ 7.2.2.1. Syntax of repeat()

  • Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

§ 11. Grid Sizing

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 12
    Also I want to know WHY – David Genger Feb 21 '19 at 19:11
  • 6
    @DavidGenger, when you reach the spec level, you're at the source. The "why" can only be answered by the spec writers and browser implementers. Could be due to technical complexity, conflict with other functions, or just a choice that needed to be made at a fork in the road. Who knows? But hopefully the issue is addressed in Grid Level 2. – Michael Benjamin Feb 28 '19 at 23:34
  • 9
    What doesn't make sense is why it matters to `repeat` whether its an intrinsic size or not. At the end of the day, a size is still calculated, so why can't the browser just use the calculated size that comes as a result of the intrinsic sizing function? – eriklharper Apr 08 '20 at 16:35
0

I've worked around this by doing

grid-template-columns: repeat(auto-fill, minmax(0, max-content));

This ensures that the grid tracks are created with a minimum size that is not "intrinsic" whilst allowing the tracks to expand to fit based on the max-content. I use auto-fit instead of auto-fill sometimes depending on use case, but both should work.

eriklharper
  • 2,882
  • 5
  • 25
  • 28