Why doesn't min-content work with auto-fill or auto-fit?

Question

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?

Telesthesia

Answer 1

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

• An intrinsic sizing function (min-content, max-content, auto, fit-content()).

• A flexible sizing function is a dimension with the fr unit.

Proserpina

Also I want to know WHY – Pearlpearla

@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. – Proserpina

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? – Concertize

It appears the issue is not addressed by Grid Level 2, it says the same as before. And it doesn't look like Grid Level 3( is going to be of any help either. – Tautomerism

Answer 2

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.

Concertize

that won't wrap to multiple rows instead it squishes the elements – Fulmer

replacing 0 with some minimum value works best in my case. Here is my code: grid-template-columns: repeat(auto-fill, minmax(256px, max-content)) – Wrack

Answer 3

In cases like this, I think flex might be better suited because it does take into account the intrinsic size of the elements when placing items. The problem with something like:

grid-template-columns: repeat(auto-fill, minmax(256px, max-content))

is that you are saying your items may shrink down until 256px in width. In most cases, especially with dynamic content, you do not know how long the longest title, word, or element will be. This is what flexbox was made to do.

However, I was also hoping this was not the case. My use case was that I was tring to do space between a title and some buttons on the same row. At first thought, this should be accomplishable with subgrid, which allows alignment of subitems to affect other items. I spent the better part of a day trying to get it to where when one column wraps, the rest wrap. I did get a partial solution using the above grid-template-columns, but the unfortunate part is that you cannot use intrinsic attributes for the auto-columns. This makes it so long titles might get cut off. Flexbox is the correct solution here, and it might be for you as well.

Cosmotron

The problem with flexbox is that it only affects a single item. Imagine a bunch of text fields, each with a label. If there's enough width, the labels should go to the left of the text field, otherwise they should go above the field. Easy enough with flexbox and flex-wrap, but if any row needs to wrap I want every row to wrap for obvious aesthetic reasons. AFAIK, this is impossible with flexbox. – Tautomerism