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.)
#all display: grid grid-template-columns: repeat(9, 1fr) grid-auto-rows: minmax(100px, auto) grid-template-areas: "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 grid-template-areas: "hd" "main" "txt" "abt" "prj" // YEP @media screen and (max-width: 500px) grid-template-columns: 1fr 1fr grid-template-areas: "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
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 (
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.