6

I really don't think this should be quite so hard. I have an unknown number of columns to display in a css grid. I want all the columns to be the same width to match the content. I want it to be min-content so the text will wrap when it gets too long. I have tried many different variations. But essentially, this is what I think I want and not sure why the browser says "invalid property value" on the grid-template-columns line.

.flyer-container > div {
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}
dmikester1
  • 1,374
  • 11
  • 55
  • 113
  • 1
    This is not a duplicate of that one. I do not want to wrap any columns. All columns need to stay on the first row. – dmikester1 Jan 15 '19 at 17:23
  • The linked answer states quite clearly that what you want to do is not possible without stating a minimum width...hence it's a duplicate. – Paulie_D Jan 15 '19 at 17:25
  • *"Unfortunately, with automatic repetitions, the minimum length cannot be auto, min-content or max-content alone, because that is forbidden in the specification."* – Paulie_D Jan 15 '19 at 17:26
  • Aw, that's a bummer. Thanks for pointing that out. – dmikester1 Jan 15 '19 at 17:27
  • Found a better dupe which I've also linked. – Paulie_D Jan 15 '19 at 17:28
  • 3
    If anyone is curious, I ended up doing this and making it work for my situation: `grid-template-columns: repeat(auto-fit, minmax(min-content, 200px));` – dmikester1 Jan 15 '19 at 17:45

0 Answers0