1

I am setting up a layout with CSS grid that needs to have cells of fixed sizes, but undetermined overall size. That is, the size (h and w) of the container div may vary, but the sizes of the various items divs must always keep to fixed percentages (both h and w) of the container.

According to this question and to another question it refers to, the correct way to achieve the desired result at the container level is to use the minmax(0, value) syntax for the track sizes. The answered questions used the new fractional units and gave examples as minmax(0,fr), but I thought it may work with percentages as well and I tried this: 

.container {
    display: grid;
    grid-template-rows:  minmax(0, 3%) minmax(0,3%) minmax(0, 5%) minmax(0, 53%) minmax(0, 8%) minmax(0, 3%) minmax(0, 20%) minmax(0, 5%) ;
    grid-template-columns:  minmax(0, 3%) minmax(0,54%)  minmax(0, 3%) minmax(0, 40%);
}

It does not work: cells resize to accommodate overflowing content instead of showing scrollbars when needed. But if I switch to indicating tracks in pixels, and even with the regular syntax, cells stay put as expected:

.container {
    display: grid;
    grid-template-rows:  20px 20px  30px  310px 50px 20px 110px 30px ;
    grid-template-columns:  20px 410px 20px 300px ;
}

But of course, then the overall size is fixed, which wouldn't work. Is the minmax(0,x) syntax not working for units other than fractions? Or am I on the wrong track?

stefano
  • 769
  • 2
  • 10
  • 24
  • You may need to add `min-width:0` to your div elements but a [mcve] would be useful. – Paulie_D Feb 20 '19 at 16:35
  • https://stackoverflow.com/questions/54128973/in-css-grid-why-is-1fr9fr-not-behaving-the-same-as-10fr-in-small-screen-sizes/54129099#54129099 – Paulie_D Feb 20 '19 at 16:37

0 Answers0