Hasty Treat - CSS Grid Masonry (Grid Level 3)

Awesome. So

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?

It was Masonry.

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 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? wherever they're able to fit either on the column access or the row access.

Can I use, .com is the best place in case you have not,

Oh, that's okay. Yes.

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 libraries. So many things that he's made,

grid masonry.

and have everything really hang to the The far right by just simply using direction RTL Now along comes CSS grid level 3

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.

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

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? So I guess it won't work with Xbox then. That's wrong.

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.

Tolinski.

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.

when the only solutions for this were JavaScript.

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.

syntax, and you'll get 14 days for free. Give it a check. This service is really, really super neat.

Boss, and Scott, El Toro Loco,

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.

Hey. You know what? The song I was thinking about is that maybe Do we need to do another

that includes 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, 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,

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, Monday. Monday. Monday.

CSF.

CSS grid masonry.

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

So whether it's rows or columns and you set that to be masonry,

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

if you're using f r units on your grid.

all of your grid items that have size. So this works similar to Yeah. Without doing You can only define what the axes are.

And then what that will do regardless of and we're

The idea with CSS

c o, man, stuff, but there's a property called direction in CSS that allows you to do right to left.

I think there's a couple options there. The example they have is as next.

and you specify by the width of the height of them and and how many you have and and whatnot.

even just if you head to his, like, metaphysy dot,

he's just on so many influential projects and things that I've used From Packery to Isotope, 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

is it will first Layout

Mhmm. Like the Neuomorphism.

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.

Peace. Peace.

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.

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? 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'

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

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.

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 I think this is neat because we can change the grid direction with masonry 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, Now when CSS Grid first launched, I think the biggest missing feature that a lot of people had on their minds was, 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.

Where it was masonry, where you'd click something and expand, and the whole layout would refill and rechange. That was Isotope?

The answer is probably not. Yeah. Yeah. But the good news for that is if you wanna do 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 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.

CSF. Head on over to syntax.fm

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

and this was in 2017.

Yeah. Yeah. This is this is also something that I 3 almost 4 years ago now, I said, like, how do you do the Pinterest layout in Grid? And the answer was, 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? Pinterest is probably the most popular.

GitHub repo called CSS Grid AMA, Masonry grid is that you pick one of those axes,

masonry style layouts.

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 Age of life. Yes.

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. 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 Lots of websites do it now. When you think about De Sandro's metaphysy,

would think so. I don't know.

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.

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, David DeSandro And stuff like that using flip animations, and it's just by, like, adding 1 prop, essentially.

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 From what I've read, I think the masonry

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 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/

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 So CSS Grid comes out. It makes everybody's life easier, but it doesn't solve the masonry problem.

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 Probably.

And that's good. If you think about, and then you also set this new property masonry auto flow,

added 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.

One giant shout out to David DeSandro.

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 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.

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 The people who have to implement this into the browser? CSS grid level 2's,

or Isotope dot j s where they all lock together, the order and the direction that it flows. So Yeah. We now have CSS grid level 3. It's a draft proposal.

he has Yeah. Isotope Laid out, and they start to pack them into show.

masonry layout, which will allow you to stack 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,

So

items together

we're gonna call it height in this case, but it can go either way.

subgrid, and I believe that was it. And now we have CSS level 3, which is in proposal, and it is adding 1st, before it even divvies up the free space, it will

And you may not have used the direction property unless you are getting into internationalization

CSS Masonry, a complete guide, 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 auto flow next property

Oh, what we need here is we need a a Chris Coyer

that space and go to the, like, the next available open line, 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 In this Monday, hasty treat. We're gonna be cooking up something really good for you. This is CSS grid level 3 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.

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.

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 It's hard to it's such a visual medium, but the 4th item would be

So next basically causes it to skip, I think these tools will open that. Will it be abused?

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

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 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

So it it shows that the without Masonry AutoFlow next,

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.

placed in.