1

I'm having trouble with a misbehaving grid. For context, I have a single page application that I am trying to turn into a grid-layout at large screens. My HTML has a div of "main-grid" that wraps the entire page:

<body>
    <div class="main-grid">
            ...
    </div>
    <script ... > </script>
</body>

I did not add any properties to this element prior to this media query:

@include media-md {
  .main-grid {
    display:grid;    
    grid-template-columns: minmax(1em,1fr) repeat(3, minmax(10rem,30rem)) minmax(1em,fr);
    gap: 2em; 
}

The issue I am having is two fold First: This scss compiles into this:

.main-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(1em, 1fr) (minmax(10rem, 30rem))[3] minmax(1em, fr);
    grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(10rem, 30rem)) minmax(1em, fr);
gap: 2em;
  }

I understand from research that IE uses the bracketed syntax instead of repeat, but VSCode does not seem to understand this. It is throwing an error at [3] and causing chrome and FF to gray-out my regular grid options as well.

I have removed these previously and typed out each column, still Chrome and FF do not recognize this code. Anyone know whats up with it? Just in case I'm not being clear enough: Here's a live shot of my devtools for reference on the wonky grid and grayed-out styling;

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Matt Bramlett
  • 11
  • 1

1 Answers1

0

The reason for the grayed out code is shown if you hover the yellow warning signs in the browser dev tool.

To me it seems to be two different issues:

(1) -ms-grid-columns is grayed out complete because the NAME = '-ms-grid-columns' (not the value) of the property is unknown in that browser(s) which is correct i.e. in FF, Chrome. (The brackets [3] seems not to be the reason).

(2) grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(10rem, 30rem)) minmax(1em, fr); is grayed out for the reason that VALUE of the proerty is wrong. So the code will not work at all in the browsers.

Reason for second issue seems to be the use of the unit frwithout value. Try to change it i.e. to 1fr should work.

Just a remark to unit fr: Because of compatibily I am not quite sure if it is a good idea to use that unit in the moment. It seems the unit is not supported by browsers well and canIuse.com marks it as experimental at all... Maybe you would like to have a look yourself:

https://caniuse.com/?search=CSS%20API%3A%20fr

Brebber
  • 2,986
  • 2
  • 9
  • 19