Hasty Treat - CSS Grid Masonry (Grid Level 3)

Welcome to Syntax.

In this Monday, hasty treat. We're gonna be cooking up something really good for you. This is CSS grid level 3 that includes CSS grid masonry.

Now if those words don't mean a lot to you, Just wait because we're gonna be talking about why this is such a cool thing and why we've been waiting for it for so long. This episode is sponsored by LogRocket.

Now LogRocket is the perfect place to see all of your exceptions happen in real time. Hey. Do you use or break something on your site? Well, this allows you to see not only the network tab, the console log, but the DOM and the user as they clicked and made the thing happen. Maybe they typed in something and it broke. Now you get to see all of that happen in a scrubbable video replay. It is Really, really super cool. This is one of those services that I highly recommend checking out their little landing page and then checking out the scrumbleable videos because It's one of those things that you really have to see to understand just how amazing this is. Anybody who's ever tried to debug an issue that's happening in production, Well, it sometimes can be like trying to find your way in the dark without a flashlight, and this is that flashlight. So check on over to logrocket.comforward/ syntax, and you'll get 14 days for free. Give it a check. This service is really, really super neat.

Before we get started, let's introduce ourselves. My name is Scott Tullen, scammer developer from Denver, Colorado. And with me as always is the West Boss.

Hey. You know what? The song I was thinking about is that maybe Do we need to do another episode where we introduce who we are and our backgrounds? Because the last time we did that was, like, two and a half years ago.

And I I talk to a lot of people who say I started listening 6 months ago or whatever. So shout us out on Twitter if you want that episode.

Not necessarily again, but, yeah, an explainer episode as to who we are and and whatnot. Who is your daddy, and what does he do?

Do you know do you know what movie that's from?

That's, like, I think it's kindergarten cop. It's kindergarten cop. I've never seen it, but, like, I I remember, like, I I've probably even said that many times in my life. Yeah. You have to go hard. There was a there everybody had an an Arnold phase. Yeah. Yeah. It's like the very nice I've never actually seen Actually, seen the original Borat either. The bed is very nice. Had a Yeah. Very nice. Yeah.

Age of life. Yes.

Likewise, I don't know when Borat came out. I think it was probably before this. But before we get started talking exactly about what this is, I I I figured, 2015 Scott would like to pop in here and just say thank you very much for the CSS working group for adding this grid masonry because this would've saved my butt Back in 2015 when the only solutions for this were JavaScript.

Now when CSS Grid first launched, I think the biggest missing feature that a lot of people had on their minds was, oh, this doesn't solve the masonry problem, but it solves so many other problems. Right? So CSS Grid dropped. We all know that you got these amazing grid features that allow you to do all the things. We used to have to have a 9 60 grid or whatever grid in here before to assign things to a grid super easily. Like, basically, it validated a whole scope of libraries at the time.

So CSS Grid comes out. It makes everybody's life easier, but it doesn't solve the masonry problem.

Now along comes CSS grid level 3 draft, which includes masonry style layouts.

So, Wes, do you wanna, give a little intro on these?

Yeah. Yeah. This is this is also something that I I wanted as well. When I was working on my CSS Grid course, I thought, of course, this is gonna be doable, and I went to Rachel Andrews' GitHub repo called CSS Grid AMA, and this was in 2017.

So 3 almost 4 years ago now, I said, like, how do you do the Pinterest layout in Grid? And the answer was, yeah. It's not. It's not what it is. Everybody thought it was gonna be it. Mhmm. And it's not what it is. That's more of a CSS columns thing, but the the downside of columns is you can't control the order and the direction that it flows. So Yeah. We now have CSS grid level 3. It's a draft proposal.

CSS grid level 2's, added subgrid, and I believe that was it. And now we have CSS level 3, which is in proposal, and it is adding masonry layout, which will allow you to stack items together regardless of and we're we're gonna call it height in this case, but it can go either way.

And that's good. If you think about, Pinterest is probably the most popular.

Lots of websites do it now. When you think about De Sandro's metaphysy, he has Yeah. Isotope or Isotope dot j s where they all lock together, you have to do that in JavaScript right now, and that is going to change once this Gets merged into the CSS Grid spec. And once all of the browsers implement it, it looks like Firefox already has it implemented Under a flag so you can test it out. It might change, but that's the whole point of the the proposal is that you can see what people think about it. Before we go further than that, can we give

One giant shout out to David DeSandro.

Very influential libraries. So many things that he's made, even just if you head to his, like, metaphysy dot, c o, man, he's just on so many influential projects and things that I've used From Packery to Isotope, just a lot of really neat stuff. So I I just wanna give a big shout out to Deepa Syndrome. Flickety. Flickety was the That's ParaGosh. Library.

Yeah. He's definitely one of my all star influential,

people in this space, though. And he all his little Logos that he's been creating, just so cool. Alright. So let's talk about how it's gonna work. So the way that it works, CSS Grid Masonry, is that, Generally, when you have a grid, you specify either your grid template columns or you specify your grid template rows, and you specify by the width of the height of them and and how many you have and and whatnot.

The idea with CSS Masonry grid is that you pick one of those axes, So whether it's rows or columns and you set that to be masonry, and then you also set this new property masonry auto flow, I think there's a couple options there. The example they have is as next.

And then what that will do is it will first Layout all of your grid items that have size. So this works similar to if you're using f r units on your grid.

1st, before it even divvies up the free space, it will say, alright. Well, this item here has an explicit start and stop. It Starts at 2 and goes to 4, or this item here spans 5. It it says so in the CSS.

So we'll first put all of those in your grid, and then you're you're left with empty space. And then it will start taking the additional items which are not explicitly Laid out, and they start to pack them into wherever they're able to fit either on the column access or the row access.

From what I've read, I think the masonry auto flow next property prevents it from filling in. If you look at the masonry auto flow Property line like the 2.5, and you scroll down, you check out that image.

So it it shows that the without Masonry AutoFlow next, It's hard to it's such a visual medium, but the 4th item would be placed in.

So it would masonry into the empty space, where with The masonry auto flow next, it moves it to the next line. It can either be pack or next. And by default, it's the other one. What what was it, packed? Pack.

Pack. If you look at the 2.5 masonry auto flow property Okay. Yeah. It says the value can either repack or next. Oh, yeah. Or pack. Definite first or ordered.

So next basically causes it to skip, that space and go to the, like, the next available open line, Which that to me feels just like well, that was one of my questions when I was looking at this was like, why would you use Masonry at all if you are using this I I guess, like, this is one of those things I really need to just get my my fingers dirt again. I need to just, you know, give it a test. Oh, yeah. Yeah. Well, Maybe you could turn it on or off, and this is just Scott and I trying to parse what the spec is. Oh, yeah. Oh, yeah. I certainly do not envy

The people who have to implement this into the browser?

Oh, what we need here is we need a a Chris Coyer CSS Masonry, a complete guide, blog post, and and that's gonna blow it all open for me because that was, like, the defining thing for Flexbox for me. So one thing I thought was neat in here was using the direction property in CSS.

And you may not have used the direction property unless you are getting into internationalization stuff, but there's a property called direction in CSS that allows you to do right to left.

And this is something that's not necessarily new, but in the past, like, with Flexbox, we could change the flex direction.

And I think this is neat because we can change the grid direction with masonry and have everything really hang to the The far right by just simply using direction RTL grid masonry.

And on the horizontal direction, it pins everything. Essentially, It goes from top right to lower left now in our grid, and and that's really neat. But what's really neat about this is when we even rotate this on its Access a little bit and you do direction of right to left, so that pins it to the top right. And then you do your masonry on the y rather than the x axis, and it goes top right, then middle right, then bottom right, And then the next one will kind of scoot up as far as it can to the top right, and this gives us An insane amount of features. I mean, just tools in general to do this. We haven't been able to do that before. Or at least not easily. You'd be doing, like, Some really interesting workarounds for it, but I I think this really blows open just being able to put the content Anywhere you wanted at any given point without doing, you know, position absolute or something like that or taking things out of the flow. I I it's really, really astounding when you look at some of these examples.

I highly recommend heading to this link that we have in the show notes to check out the working group because what they do is they have these little images that show you where all the boxes go with various bits of code. And, it is very illuminating. Very, very cool stuff. It's pretty pretty neat, and they they have tons of little examples as to what happens when you use

When you anchor 1 item here and what happens when you align the item, what happens when you use an inline grid? What happens when you use a margin and a gap? Yeah. Man, there's so many edge cases that could be this Direction thing. I didn't even realize that we're getting this. It's a proposal for CSS right now. I'm glad you said this because the same thing happened with GAP where we we added direction for flex direction. And then, like, oh, grid. Do we add grid direction? And it looks like now they're just saying direction. Direction. And that will That will work with everything. Same thing with gap is no longer grid gap. It's just gap, and it works with Flexbox and Grid now. So direction would also work with Flexbox? That's what you're seeing? I would think so. I don't know.

Probably.

Well, no, actually,

Because because direction is is a property that's existed for a while.

Yeah. But with Flexbox, it's it's row or column or row reverse or column reverse. Right? That's how you change the axes of Flexbox, and you can't change the axes of Grid Yeah. Without doing You can only define what the axes are.

So I guess it won't work with Xbox then. That's wrong.

Oh, that's okay. Yes.

Awesome. So I am really excited about this. It's just another thing that's been on my wish list for a long, long time. And, if we talk about, like, What are the things that we still need to use JavaScript for for layouts? It was Masonry.

What other things can you think of that you still have to do? Is, content queries is still something you have to use for JavaScript? Element queries. Is there Element queries. Yeah. Is there anything else that you're still using JavaScript for? Auto height automating? Hitting. Oh, aspect ratio, but that's being solved. That's coming anyways. Yeah. I like need to fire up the can I use for aspect ratio?

Can I use, .com is the best place in case you have not, ever been even though we talk about it all the time? Aspect ratio CSS is, big fat reds across the board forever and ever and ever. Looks like Flexbox sent a Flag for both Firefox and Chrome, though, so that's Kind of. Firefox adds it for flex items. Oh, yeah. Okay. Yeah. So it is a flag. Okay. I can deal with that. I just need it now.

I need it now. Right now, I wrote a a little wrapper for for React to do it. I need I need that, aspect ratio. So that's really, really it for me. It's funny that you mentioned those 2 things because I have my, like, final thoughts written here. And I said this is basically power tools for CSS layouts at this point. CSS Grid, you can do anything with it. And I I like I'm I have a hard time of, like, layouts that you could not to do with this kind of thing, between grid and whatever. Masonry was really the last holdout.

And so, like, really, like, people I think the whole Complaining about CSS layouts being hard is done. Yeah. Once this is in, it's done. Like, no more. It's you can center things. Like, that joke is is Tired. You can you can set your things very easily in CSS. That's not a thing anymore. Vertical center, yes, not a thing anymore. Masonry layouts, finally, not going to be a thing anymore. And I I wrote here, once we get element queries, my CSS ing wish list is essentially going to be complete. That and aspect ratio, Those things are going to make me as happy as I could possibly be with CSS. And I think these tools specifically open up the possibilities to create A just an endless amount of layouts, and it's gonna be really, really fascinating to see this time next year what kind of stuff people are making with this. Yeah. Yeah. Super well put. Last thing I'll say is, do you think this is gonna be abused? Is everybody gonna start throwing masonry layouts into their Into their designs now because it's so easy. I think we would have to get into a time machine for that to happen when people were abusing it already Even with JavaScript? No. I don't I don't think so, but I do think it opens up some really neat possibilities. Now, Isotope, let me pull up Metaphysi again.

David DeSandro had 1 neat plug in that we used that was based on Masonry where so, like, Masonry is just like the grid aspect of it. Okay. So it's Isotope. Oh, no. Isotope was the sorting one where it did, like, flip style animations. He used Masonry under the hood.

So oh, man. And Packery has, like, drag. So I don't know if he just doesn't have this plug in anymore, but he used to have one. I think it was Isotope like, and it might have been Isotope Where it was masonry, where you'd click something and expand, and the whole layout would refill and rechange. That was Isotope?

Yeah. We just rerender it, but it would figure out the the what had changed. That's the one good question to have is that, will this be animatable?

The answer is probably not. Yeah. Yeah. But the good news for that is if you wanna do listen. I just I don't wanna drop my course here, but I did a course on animating with Framer Motion. And the latest version of Framer Motion allows you to animate properties on Flexbox And stuff like that using flip animations, and it's just by, like, adding 1 prop, essentially.

So, like, hey. If we can get that, then I'd be very psyched. Again, animating any of these properties is is, like, really what I wanna see. I wanna see animating these properties. I want them to be able to be, you click and expand and the whole thing relayouts and whatever. That's what I want, and, I think these tools will open that. Will it be abused? I don't know. Maybe. Potentially, I've used masonry, so, there is a chance that I will abuse this. In there. We're all guilty. Yeah. Yeah. So there's a there's a chance We might see a resurgence. Right? Neumasonryism.

Mhmm. Like the Neuomorphism.

It's a bad joke when you have to explain it. That's that's for sure. Yes. Alright. I think that's it. Let's cut that off before Scott has any more terrible jokes.

Thank you for tuning in, and we will catch you on Wednesday.

Peace. Peace.

CSF. Head on over to syntax.fm

for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review Do if you like this

show.