 Hi everyone, so my name is Juan Pablo, I am a New York based designer, so this is a little bit of a workshop and we have around 25 minutes, 25ish minutes, so I'll go fast through the first section so we can get going into the actual fun part of the code. So just a quick show of hands. Who's heard of CSS Grid? Good, good. Who's actually written some Grid? Written some Grid code, you have? Okay, good, good. That's perfect. Alright, so I'd like to start with a question. So what are the following three things having common? You know, Adele, a movie, and a book. 1988, 1988, 1986. Basically what they have in common, what might have other things in common, one thing they have in common is that they're all older than the web, right? And you know, upon realizing this, this is my reaction, right? This is how I feel. We're all older than the web. And in this context that I want to take this workshop, right? Understanding how young the web is, how young this medium is, and now is the perfect time to learn about Grid, like right now. If you're a developer, if you're a designer, if you're a blogger, if you just installed your first WordPress site yesterday, now is the time. Because Grid will change the way we see, the way we think, the way we read the web. So let me divide this workshop into three sections. So why, how, and when. Let's start with why. So let's just take a quick, you know, a quick trip back to the beginning. 1989, Tim Berners-Lee, sorry, Sir, Timothy John Berners-Lee, and then the World Wide Web, right? There's a funny anecdote that his friends make fun of them because they said, you know, the World Wide Web, that will never catch up. That's a funny name. And here it is, right? So this is the first page, right? I think it's 1991, it's still on. And if you notice, that's the layout of the web is left to right, up to bottom, you know, there's line breaks, and that's it. There's nothing else. That was the beginning of the web. Then 1995, tables come around, a very famous space site. And designers, right? We looked at this and we were like, yes, it's a grid. You know, a table has grids, has cells, has rows, and we slice the tables and we broke them and we say like, hey, that's a grid. You know, we can actually do a lot of stuff. We kind of hacked our way through it. If you work with email newsletters, this is still the way we, hey, we called newsletters. We used tables like it's 1995. Well, you know, we eventually found out this was not the solution for layouts, right? Tables had a ton of limitations. And it's worth noting that JavaScript came along. And JavaScript is a really, really, really beautiful, really powerful thing. And you can do a lot of things, but JavaScript is not failed for layout, right? It's non-performance. It's got a ton of issues. And you know, Matt Bolenweg said a couple of work camps, U.S. work camps that go, you know, learn JavaScript. If you learn one thing, learn JavaScript. So, yeah, do learning. Go ahead. But that's not for layout. Don't overuse your pop-ups, okay? Wait, what's going on? Ah, okay, no. No pop-ups, please. All right, so 95 JavaScript comes, and it's still around. 96 Flash comes around. And once again, we were like, yes, something, something to do layouts. Something exciting. And, you know, this is a website I did for FC Harlem more than a decade ago. And it was exciting, right? You will move like tongue crews, move stuff around. You have timelines at keyframes. But Flash had problems again, right? You needed to buy software. You needed to put a video on the web, and SEO was horrible. And it had a ton of stuff that was going against it. So eventually, some random guy with black sweaters just said enough. So 98, CSS comes around. So that's 20 years, right? 20 years from this year. And revolutionized it again the way we thought about things, right? Layout. Now we had to split our HTML and CSS and we can do multiple stuff. And it kind of like changed so much the way that, you know, we treated it as it was a solved thing and it stuck around for the longest, right? We did this one column and long column. We still do it today, right? Sidebar and column. Sidebar and column. And we stayed and we stayed and we did the same. And then something happened, right? A revolution, right? The iPhone, a ton of devices, a ton of things. And this happened. And maybe this is going to happen eventually, right? And we have phones that look like tablets, that look like laptops, that look like keyboards, that look like watches. And it got overwhelming. So, you know, we started trying to fake layout, right? And hide stuff. But we never had a solution. Until 2010, Ethan Marquardt said, you know, he's the father of responsive design. He said, you know, we should look for opportunities to be just a little lazy. Like, why are we trying to build a website for one size for one size for one size for one size? Why don't we just build a fluid side that works, you know, pretty much everywhere? And, you know, once again, you know, designers, we got so excited, revolutionized the way we did things. And we started doing, you know, new things and exciting things. But, you know, we took the lazy part a little bit too far. And based on, you know, on what we were able to do with the web, we pretty much built the same website over and over and over and over and over and over and over again. And, you know, we were like, yes, job done. We solved the web. And, you know, once again, going back to that previous slide, you know, the web is only 29 years old, right? We had to design websites based on its limitations. And we built layouts and frameworks and, you know, plugins and boilerplates to mask those limitations. And the problem that happens is one of my favorite plugins, right? You know, we all do the same thing and, like, be different and you always send out. And we all end up looking like the same thing. And it's not that, you know, something like Bootstrap is bad. It solves a lot of problems. But it's not the only solution. So this is what CSS Grid comes around, right? It does not hide the limitations. It gets rid of them. And that's a beautiful thing. Jen Simmons, her and Rachel Andrew, they're like the reason I'm here, the reason I love Grid. She says, you know, these new CSS revolutionizes web page layout. And we've heard it before, right? The revolutionizing tables and this and, but no, this one, this time it really does. So anyway, right now you're thinking, okay, okay, JP, we get it. So this is Grid. It's awesome. You love it. So what I want to know is, how? So let me show you how you can use this magical layout that I speak of. So just a couple of quick notes. The following demos are on Firefox developer edition. If you're familiar with vendors in Google Chrome, Safari, Firefox, they all have the public version and one that's a couple of versions I have. So you can test it. Firefox developer edition, it's beautiful. It's got, I'll show you how to use it in a second, but it's got a ton of cool handy tools that help you with CSS Grid. So that's one thing. And then the second note is, for these demos that I'm showing you, all I have is one container with six little boxes inside. I'm good with French, but I'm good for catching six. So six boxes. And then I just gave them a color so you can see. That's all I'm going to use when it comes to HTML and CSS that's not Grid. All right, so that's just some magic. This is the first layout. So what's going on here? So there's four lines of CSS, right? Display Grid, Columns, Rows, and Grid Gap. Let me change this. All right, so let's start with Display Grid. So Display Grid is basically, you tell your computer, your browser, sorry, hey, this is going to be a Grid layout. That's it. That's all you need. And the browser already knows, the browser will do it for you. Then one of the beautiful things about CSS Grid is that for the first time ever, since we have two-dimensional layouts, right? You've heard of Flexbox, you've heard of, you know, what it would float before. You can do one or two. You can do vertical or horizontal, right? And then think about when you work with a poster, when you work with print, right? You do these fantastic grids, fantastic things that are two-dimensional, right? You just don't think one way or the other. So this allows us to work with columns and work with rows. So what I did here is, let's look it up. So it says Grid Template Columns, 1FR, 5FR, 3FR. FR stands for Friends, no. FR stands for Fraction. And that's a new thing that comes with Grid. Basically, we have so many units in the web that we actually, you know, we have pixels, we have percentages, we have amps, we have ramps. But we've always have to calculate how much, you know, how much of the screen do I have? Do I have 10% and then we'll have something left? Do I have, you know, and then our boxes move to the bottom and we're like, why? And then we have to remove the margin of the parting so it goes back up and then it goes back down. And then you change the screen size and everything gets broken. FR fixes that. Basically, I'll solve my browser. I have three columns. I want one to be one, five, and three. So basically the computer will add them up. One, five, and three is nine. And it says, so the first one is one, nine, five, nine, and three, nine. And that's it. And it just splits it for me. Then we do the same with rows, which I told it, one row to row, three rows. 200 pixels, 100 pixels, and 80 pixels. And it does it for me. And there's some magic happening here that the third row, it's empty, but it's 80 pixels and it's there. And the browser respects it. No more like float and bottom and hacking and absolute. Everything is there. And then it's a grid gap, which it's also a beautiful thing, like no more paddings. You just tell it, hey, I want my gap on all my columns and rows to be one M and it respects it. And then you see how it works right now. If I resize it, you see I changed the gap. I changed, removed it. I'm changing the color of my, and you see it's always one, five, and three. That's always going to be the ratio of them without me having to do any extra work. All right. So let's take a second example. Whatever is grayed out is what I used. And then I changed some stuff around. So basically you have a client, right? And the client says, you know, I want to have an ad that's this big and that's 100 pixels because that's what I'm going to make money. So now we have spam, right? I did the same columns as before, three FR, 100 pixels and a far. And you notice I can combine sizes, right? So the first column would be an FR. The second will be static 100 pixels. And the next one will be whatever the computer decides the way it is. Like I don't have to worry about that. And the same with my rows. You know, I changed 15 VH, which is view for height. It's an amazing unit if you've never used it. And then I just go and say, for my blue column, just span two rows. And my orange span three columns. And that's it. It just spans and it does all of the work for you. And just five lines of code. I built a layout that has fluid columns and static columns and fluid rows and static rows. And it works like magic. So now you have to do, you want to do a gallery, right? You want to repeat stuff. So we don't have to do like, like I did here. I have to do, you know, please do one FR, five FR, three FR, four FR. And you know, what do you have 20 things? So you have to, you can use, you can basically use repeat, which basically I just call my computer. Hey, my browser, can you repeat five columns? They're all the same size. And then can you just repeat four rows that all 10 times the view per width? And it just does it for you. And once again, like, white space matters. White space a beautiful thing in print. And white space happening here. You see all of that is right there. It's reserved. If I add something else, it will go here. So let me actually animate this. And you'll see how it respects the one FR. It just goes up and down. That's pretty sweet. Now, one of the issues with this is it's technically not responsive, right? Because you have an image and the image just gets really involved. You open this on the phone and it's like, I can't see this. So there's a really handy thing called, you know, it gets a little more complex. But basically, you repeat, you out of these things, you can tell her what the minimum size, what the maximum size column can be. Same thing. And then this is what happens when you reduce the screen size. Grid will know and will say, oh, you told me you want the containers to be a minimum of 120 pixels and you told me to make them as big as everything else. So that's why the browser. And that's what, four lines of code. And you can have a full gallery right now without, you know, any media queries whatsoever. Now let's say you have a friend, right? And they're an artist, modern art artist. And they want you to build this, right? So with Grid, if you notice this code right here and this code, it's not changing much. One of the things with Grid is that things are implicit and explicit. Things just fall down now. Actually, they do on the web, right? On the web, everything goes left to right at the bottom. But you can also be very explicit. You can say, I want an, which is, I guess, the red one, to go from columns two to four and rows one to three. Which this means lines, right? When you have a table, when you have a grid, a grid has naturally has lines and the browser knows which line is line. So you can just say, I want you to go from two to four and one to three, and I want you to go to three to five and two to six. And you see, I can start positioning things however I want it without using absolute, without me worrying about anything like sending something below. And then I can also use template areas. Basically, I, you know, I can say this is going to be my website. And this is going to be, it's going to have a header and an ad, a content and a sidebar and a footer, which is going to have the French flag, right? And then you just decide where you want to put your container. You're like, hey, you red one, you're going to go on the header. You green one, you're going to go on the sidebar. So you can move things around and you can just, just imagine working with a lot of people and having a team and you, you just tell them what template area is, what, and then just work on that area without having to worry about breaking anything else. And I think this is, okay. So when, when can I use grid? This is 2007, 0.32%. It wasn't looking good, right? Definitely don't use it. And then three weeks later, boom, it landed. It was, it was a beautiful thing to see because it was the first time ever that Firefox and Chrome and Safari, they got together and, and they worked together and they worked and released it around the same time. And you notice Firefox, Chrome, Safari, Opera, they were all there. And, you know, naturally, the web, you know how we are, Twitter, right? We're like, where's, well, you can't see what it says. What about Explorer? What about Explorer? What about Internet? What about Edge? What about Edge? What about Edge? What about Edge? You know, so Edge is a little behind, right? And this is the part of what I will tell you, go and vote. So they implemented, but they did. October 17, they sent an update. It's here. So Edge has it. And a ton of the other browsers have it. So now 70% is here. It's a couple of weeks ago with 82%. So the point is you can start using it right now. You can, you know, well, I'll tell you how support for those that don't use it, for those browsers that, you know, they're still, you know, we have the Edge Explorer and you have a couple of, they're not here, but you know, a couple of browsers that I used either in China or India overseas, they might not support Grid yet. So you have supports, which basically you tell the browser, if you support Grid, use it. If not, use whatever you used in the past. It's really beautiful. So if you want to start using it, my full recommendation is just follow Jensen, follow Rachel Andrew, see everything they do. She built, she just released a YouTube series on Grid. She had a website called Labs that has a ton of experiments with Grid. Rachel Andrew, she actually built the course on CSS. If you want to learn CSS from an inside out, she has an amazing course. Well, you learn things like, do you know what CSS? You can actually just style the first letter, the first line of text. You can do a ton of wonderful things. And then the Mozilla network. That's where you, that's where I go for my Grid specifications. There's a new specification of Grid coming. I just got about two weeks ago. So basically, you will be able to, like, your gutters to animate them. You will be able to say to the parent, it's Grid, and then they have, basically it's called subgrid, which everything below will respond to the parent. So you have Grid once, you just write display Grid once, and everything else, you can actually style it. So you can build a Mondrian just with one line of code. Yeah. So how can I use it when WordPress, right? So we're here for a workout. I use WordPress a ton. I just started, I built two themes with Grid. Let me see, hold on, one minute? Okay. So, might not have enough time. Okay. So build two sites. It's here. Just start implementing a little by little. Wherever you see that, you know, this could probably use a little bit of a Grid instead of me adding floats, or why am I doing flex, flex, flex so much, where I can actually write one line of code and everything like repeats like I did with the galleries. Yeah, that was a demo of mine, but, well, thank you so much. I'm around to show you a couple of demos. I know it went really fast. But yeah, the future is bright and learn it today, learn it right now. You're not behind. So with the specifications to coming out, we're going to have a ton of great things to work with and a ton of beautiful sites with just pure CSS. Anyway, thank you.