7 ms·
The biggest win I've noticed from CSS Grid so far has been from `grid-template-areas`. (The `grid-column` and `grid-row` syntax used in the article is kind of a
by exogen 9y ago
The biggest win I've noticed from CSS Grid so far has been from `grid-template-areas`. (The `grid-column` and `grid-row` syntax used in the article is kind of an alternate way to spell this, but I prefer using the `area` properties.)
Ever been given mockups where the mobile design moves stuff all around into a different order? That has traditionally been extremely difficult to handle with CSS given identical, unchanging markup.
With CSS Grid you just give each of your components a `grid-area` name, and then you just tell the grid where those areas go at different breakpoints.
So on mobile you might have 4 components laid out in a single column:
grid-template-areas:
'breadcrumbs'
'filters'
'sort'
'products';
And using a @media query, a more traditional desktop layout (and add a `categories` area):
grid-template-areas:
'breadcrumbs breadcrumbs sort'
'categories products products'
'filters products products'
'. products products';
I love it because not only is the above a list of the subcomponents that make up this component, but it's also a visual indicator of how they'll be laid out.
Now all the subcomponents need to do is define their `grid-area`, they don't need to adjust their own layout at the different breakpoints.
- antibland 9y agoUsing this part of the CSS Grid syntax, I made a responsive Brady Bunch demo. Disclaimer: the theme song will autoplay on desktop. https://codepen.io/antibland/pen/VMzxqm https://codepen.io/antibland/pen/VMzxqm
- jsgo 9y agoI'm very sorry as I know "+1" type posts are bad, but that is my favorite disclaimer I've ever seen. Any recommendations from either of you on material on grid-template-areas? It sounds like it would be great for getting away from the hack of having a mobile menu and a desktop menu on our existing site (with the one for that format rendering and the other hidden), which I've hated as it is a pretty clear indicator I couldn't find something more appropriate.
- jsgo 9y agoSo I found MDN's documentation on it (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas https://developer.mozilla.org/en-US/docs/Web/CSS/grid-templa...), but wasn't 100% certain on how the implementation works. Namely, how footer and foot were related. At first I was thinking it was inferring first HTML element seen (head) relates to first area element written (also head), second HTML element seen (nav) and second distinct area element written (also nav), and third HTML element (footer) with third distinct area element written (foot). Then I see the pretty obvious grid-area within the CSS handling that linking and I must say, that's beautiful stuff.
- benjaminjackman 9y agoI came across them from this video, when I heard the "it's almost like ASCII" part (I had it on in the background) something clicked in my head and I had to drop everything to try it out. https://youtu.be/7kVeCqQCxlk?t=1039 https://youtu.be/7kVeCqQCxlk?t=1039 Watch on for the 'crazy response design' part. I am still amazed.
- jsgo 9y agoThanks for that. At work, they push site should look the same across all browsers very heavily (well, desktop = desktop, tablet = tablet, mobile = mobile). I’m going to try and share this video with one of the guys that dictates design a bit and see if I can convince to get away from all of the hacks built into it that end up breaking little edge cases which then requires browser specific hacks. It’s a longshot, but he likes bleeding edge so fingers crossed. This is incredibly compelling stuff though. First thing in a while I’ve seen that has left me floored.
- dmix 9y agoWoah, I didn't fully understand how that works given the OPs description, but after seeing it in action... that's amazing!
- rhizome 9y agoI'm a little confused because in your example, grid-template-areas lists words that are the same as the class names on the elements, but I'm not (yet) sure that grid-template-areas takes a list of class names rather than them being arbitrary identifiers for the areas being laid out.
- antibland 9y agoThe class names don't matter. Each grid-template-areas value has to match the grid-area value (the actual grid item being placed).
- rhizome 9y agoRight, but do you see how you've used the same terms for both?
- antibland 9y agoI see. I only added the class names to provide a container for each child to point to where it should be placed. The fact that I named the class and the grid area indentically could seem a bit confusing. Something like "marsha-container" might have been clearer.
- metafunctor 9y agoThe song, thankfully, did not autoplay on my desktop. But then again, my daily browser nowadays is Safari on MacOS. Looks like Chrome does autoplay, so does Firefox. I'm kinda liking how Safari handles privacy, tracker blocking, and autoplay blocking.
- Majora320 9y agoautoplay can be disabled in Firefox with a simple configuration tweak, and I'm sure it can be in Chrome as well.
- johnhenry 9y agoThinking about how difficult this must have been to do with 1960s analog video technology makes this feature more impressive.
- darepublic 9y agocombine this with rem sizing units for font and padding -- now you're playing with power
- pasta 9y agoNot only power. It's a nice trick for non-designers to create nice looking designs. But you have to keep in mind to use only 2 or 3 sizes of padding and margin. For example: 0.25rem, 0.5rem and 1 rem.
- osrec 9y agoAlso, size your root element font using vw or vh. Then things become really responsive when done right.
- JimDabell 9y agoPlease don't do this. Just because I've got a large viewport, it doesn't mean I want massive text, and just because I've got a small viewport, it doesn't mean I want tiny text. Either extreme can result in very frustrating to read and potentially inaccessible text. Perhaps it makes sense in some narrow cases (e.g. the main page title), but certainly not for your body copy.
- osrec 9y agoWith calc() you can get some pretty decent scaling based on vw. If it was just a direct proportion of vw, then yes, things may look a bit on the larger side on a bigger screen, but as with a lot of things, if used with care, the results are pretty nice.
- themarkn 9y agoIt's not something that would be done as the only thing that influences the final fonts size. As another comment pointed out, it could be combined with calc(). But also, within media queries, to achieve reasonable results in various widths while still responding in a subtle way to the actual viewport with of the client.
- 9y ago
- chrisweekly 9y agoFantastic comment: useful, succinct, instructive. >"I love it because not only is the above a list of the subcomponents that make up this component, but it's also a visual indicator of how they'll be laid out." Yes! Love it. Tangent: This reminds me of some native iOS layout thing from maybe 6 or 7 years ago but I can't recall much about it-- scratch that, googled and, yeah, "VFL": > "The Auto Layout Visual Format Language (VFL) allows you to define constraints by using an ASCII-art formatted string." IOW, ASCII art for layout implementation.