a CSS Grid mystery

Something I still don't have a handle on.

Front page of the blog uses CSS Grid. The basic 'desktop' layout is spread across 9 columns. (n.b: original code was written in sass, where the line-breaks in grid-template-areas aren't allowed; I inserted and cleaned up the block here for readability.)


  display: grid
  grid-template-columns: repeat(9, 1fr)
  grid-auto-rows: minmax(100px, auto)
    "hd  hd   hd   hd   hd   hd   hd   hd    hd"
    "lft main main main main main main main  main"
    "lft main main main main main main main  main"
    "brt brt  txt  txt  txt  txt  txt  right right"
    "box box  box  box  abt  abt  abt  abt   abt"
    "prk prj  prj  prj  prj  prj  prj  prj   prj"
    "ft  ft   ft   ft   ft   ft   ft   ft    ft"

  // NOPE
  @media screen and (max-width: 500px)
    grid-template-columns: 1fr
      "hd" "main" "txt" "abt" "prj"

  // YEP
  @media screen and (max-width: 500px)
    grid-template-columns: 1fr 1fr
      "hd hd" "main main" "txt txt" "abt abt" "prj prj"

Everything before the media-queries looks okay. I don't actually use some of the smaller named areas, namely lft, right, and prk. In retrospect, those could've been .s (dots) instead. Perhaps that matters?

To improve the site's look on a phone, I put in the 500px media query. When the width drops below that breakpoint, it should swap out the columns and strip some of the small areas used merely as padding in the desktop version. And drop the footer (ft) too.

The rub: the first media query worked fine on MacOS versions of Firefox and Chrome, and on a Chromebook's Chrome. In Safari (desktop and phone), the width of the elements jumped up to 673px, when their container #all dropped below 500px.

After hours of fiddling, culminating in some helpful toggling in the web-inspector's Elements tab, I realized something was wonky with the template areas. I created the second media query above, et voilà.

B U T ... W H Y?

Are those two media queries not the same thing, expressed differently? In the same sense that 2/4 is the same thing as 1/2? Does it have to do with those extra bits?

I'm too tired of this problem to keep probing, and understand.

  • css
  • css grid
  • meta
  • grid-template-areas
  • grid-template-columns