 Good one. CSS Grid and WordPress. My name is Juan Pablo. People call me JP. I'm a web designer, New York based web designer. I want to start with a show of hands. Who's head of CSS Grid? Who's heard of it? Yes. Awesome. Who's written some CSS Grid? Good, good. And we have a few hands up. Hopefully after this session we'll get quite a few more. Alright, so let's get started. So my name is Juan Pablo. I'm a web designer. I design things for FC Harlem up in New York and New York City FC, which is Soccer Club, which is playing today against Atlanta, which I'm not going to mention. And I'm also a mentor at blog.io, UX. Alright, so let's get started. So I usually like to split up this talk into three sections, which is why CSS Grid, how and when. The why is still really important. The how also. The when is basically now. You said now, right? The one that I've added is demos, because since I started doing this, I've been doing a few things. I've been adding more stuff, so I'm really excited to share a few of them. Alright, so let's get started with the why. Why CSS Grid? And I usually like to start with a simple question. What are these three things having in common? Glenn, a movie, and a book. One of the things they have in common, well, they might have a few things in common. One of the things they have in common is that they're all from the 80s, 1986, right? The other thing they have in common is that they're all older than the web, right? They existed before the web existed, right? And it's with this mindset, well, this is how it makes me feel as soon as I realize that, right? That's me right there. And it is with this mindset that I like you to view this talk, to understand that how young this medium is, right? How now, right now is the perfect time to learn CSS Grid, right? Whether you're a designer, whether you're a developer, whether you're a blogger who just installed the first blog ever, right now it's a great way to get started. So let's take a quick trip back, right? In 1989, Sir Timothy John Burner's lead, he invents the World Wide Web, and this is our layout. This is the first layout that we ever get, right? There's basically no layout, right? Left to right, you hit the end, and then you start on the next line. It stayed like that for a while, but the designers were like, hey, we need something more. In 1995 comes around, we get tables, right? And the designers were like, okay, this is good, this is good. So what's this? It looks like a grid, so let's... Well, it's a table, and it was built for this time, but let's just use that table, and we have some columns and some rows, and we started, you know, you can call it destroying, but we could say like creating a layout. And, you know, with time we realized this was not the layout we wanted, but, you know, you can see there was already a hunger for imitating what we saw somewhere else in the web, right? Imitating what we saw in print with what we wanted to do on the web. So that was 95. It's also worth noticing that in 95, JavaScript, JavaScript's been around for a while, and JavaScript's also a lot of pretty awesome problems, and JavaScript is great, you should learn it, but JavaScript was not built for layout, and it's really important to understand this. JavaScript does not solve a lot of the problems that we usually do try to solve with it, but it wasn't built for that. So it's been around for a while, but it was not the solution that we wanted for layouts. Wait, what's that? Sorry. Oh, no. All right. Don't abuse your pop-ups. Basically that's what I'm trying to say here. It's 95. 96 Flash comes around, and it's also worth noting that because Flash, once again, does this thing that we designers want, right? It gives us a platform where we can feel like Tom Cruise, and we can do those listings and some keyframes and timelines and drag stuff, and we get to create some really, really awesome stuff. Build this for FC Harlem a few years back, and I was like, oh, this is so easy. I don't need to learn how to go. Unfortunately, this did not solve the problem for layouts, right? It was a closed ecosystem. You need to buy it. It was really bad for SEO. You have many, many issues that eventually made us realize that this was not the solution we were looking for. The main thing that made it go away was this fella with the iPhone and basically put the nail in the coffin. That was 96, right? So, you know, the web was growing fast. It wasn't until 98, right? Almost 10 years later, that CSS comes around, and once again, it shifts the way we think about the web, right? The revolutionizes the way we build things. We got this very forgiving, very declarative thing where, you know, we write something on one page and then it works everywhere else, and we get to do these amazing things that we're not able to do before, and the thing with this is that our screen sizes stayed the same size for a while, right? And this is something we're really, really familiar with. We have the content and the sidebar, and this is, you know, you see this nowadays, because it's something that we started building because of the way, of the limitations that we had, but it just stuck around. And what happened is that this stuck around, but the device sizes didn't, right? And we got this thing, and then we got this thing, and then we got this thing, right? And you got a little bit overwhelming, right? And we sort of did something like this where we were like, you know what, I'm just going to hide things, and I'm just going to hack my way through this. A few years back in 2010, Ethan Markot, right? He's an amazing designer, amazing developer, and he said, you know, we should look for opportunities to be just a little lazy. He came up with the term of responsive design where why don't we use percentages, why don't we just let the web, you know, grow up and grow down naturally, and basically don't need so much code. And once again, it changes the way we see things. It changes the way, you know, we think about the web, we think about how we're building things, and it was pretty amazing. The problem is that we still have these restrictions with the technology, and we took the lazy part a little bit too far, right? And we sort of started building the same layout, the same website over and over and over again, and you see some of these are really beautiful, but it's the background with the sidebar, and the background, and the nice text, and the background, and it goes on and on and on. And once again, you know, the web is only 29 years old, right? And we had to design the website conforming to its limitations. You know, we build layout frameworks and layout plugins and layout boilerplates just to mask those limitations. And, you know, once again, something like this happens. And, you know, the only one that's different is the one with the lowercase d. That one stands out. So this is where the magic comes. CSS Grid does not hide those limitations. CSS Grid gets rid of them. Jen Simmons, you know, one of my design heroes, and the reason I started doing CSS Grid, she said at a conference, you know, this new CSS revolutionizes web page layout. And right now you're thinking, okay, okay, JP, we get it. You're excited. Grid is awesome. What I want to know is how? How to use this magical thing you speak of. So for the demos and for all of the little, the little videos on the slides I'm using, Firefox developer edition. Most browsers have some sort of, you know, tool to help you see how a website is built. When it comes to Grid, Firefox is best by far. So download it whenever you have a chance. If you haven't and play around with it, I'll show you some neat tricks. All right, so that's just the video. So for the next little demos to show you how an idea of how Grid works, all I'm using is some HTML. You know, I did a container with six boxes, one, two, three, four, five, six, and I added some CSS that have a color red, a color blue, a color yellow, a color green, a color purple, a color orange. That's all I'm doing besides the Grid stuff. All right, so this is some magic. So, Grid, here it is. What is this? All right, so first thing, the way the browser knows you're using Grid, you just do display Grid. This is the very, very first, the magic intro into Grid. You do display Grid. A browser knows that you're about to start doing your layout in Grid. You're good to go. And the second thing is columns, right? You set your columns. As you can see in the little image, I have three columns there. So all I did was, hey, Grid, give me three columns. One is one afar, one is five afar, one is three afar. And then you're thinking, what is afar? What is that? Well, afar is just a fraction. Just think of school. We use fractions all the time. So a fraction, an afar is a fraction of the available space in the Grid container, which basically means up to this point, if you have three columns, you will have to think, okay, so this one is 60%, and then this one is 30%, and then this one is 10%. But then, oh no, I have to change the image, so this one is 65, so you will have to guess, you move one thing, and the rest you will have to accommodate, so you will get to 100%. With this, you let the browser do the math. You don't care for the width. You just do something that looks good. That's what you want. And then the browser, let the browser do the rest. If you do two columns, and the rest one you don't know the width, I let the browser figure it out. You don't have to do it anymore. So that's one of the sweetest things that DisplayGrid is bringing. Another amazing thing is Grid allows us, for the first time ever, to think of a page as two-dimensional, right? Up to now, up to last year, when it was launched, it was impossible to think to do it with code, with CSS. I don't know what code with CSS. So you look at a poster, you know, you're designing, or you look at any movie poster, any poster out there, any book cover. You know, they have these nice, beautiful things overlapping, and they can move stuff around, but with the web, it was really, really hard. So template rows does that. It allows us to actually set our rows. So here, instead of FR, I can actually do pixels. So I did my first rows, 200 pixels. The second rows, 100 pixels. The third rows, 80 pixels. And you see what's happening there. The third row, it's empty. You only did six containers. But it's Y-space. Y-space exists now. We can do whatever we want in that spot. We can leave it alone. We can expand it. We can give no more negative margins, no more super-paddings, no more, I don't know, position absolute, floating, hacking. No, the rows will take care of that. And that's, I'll show you in a few seconds a few other examples. That's an amazing new intro that we get with rows. We have in two-dimensional layouts. And then the next new thing is a grid gap. Basically, no more paddings, no more guessing. It just does the gap for you. I'm actually, I can play the video. So I have, I'm playing around with the gaps right there. They got in bigger. And then I'm playing around with some of the column sizes and the browser is just doing it. I just, you know, change around. And then I change the screen size and I always know that, it always knows that one is one FR, five FR, three FR. Basically, one and five, three is nine. Yeah. So one nine, five nine, and three nine. It's doing the math for me. This is from the first spec of the, of the, of CSS grid. The second one that's coming up, you will be able to do different size for gaps, different size for rows and for columns. It's, it's looking pretty awesome. All right. So that's the first demo, right? And this is pretty straightforward. Now let's do, let's look at another sample. This one, you have a client and the client says, I need an ad on my site. And my ad has got to be a hundred pixels. And that's the blue one, right? And I need it there at all times because I need to make money. So you're thinking, wait, so that's not responsive anymore. So see with, with display grid, with the columns, we can actually say, well, the first column was going to be three FR. The second one is going to be an static a hundred pixels and the third one is going to be whatever is left. And that's pretty awesome because I don't really know what the left and the right are. I know that one needs to be a hundred pixels and the same for my rows. One is going to be 200 pixels, one is going to be a hundred, one is going to be 50 VH, which is another unit. So I'm just mixing units here and I'm having fun and I'm seeing what works best for my layout. And then I can go around and the blue one, I can tell it, hey, it needs to expand two rows, not just one. So you see it automatically goes up and that's all my column. Hey, my column, my orange column is to expand three columns and it just does it for me. I don't need to do any math or anything and it knows more or less where to go and if I expand it, you notice that the blue one is always going to be 100 pixels. The first one is going to expand and contract and the other one is going to do whatever is left. I'll let the browser do the math. So you want to build a mini gallery. You see that you have rows and columns so that makes sense to do it. So I don't really want to write one column, one column, one column, one column, one column. You can actually have things like repeat where you just tell the browser, hey, please do five columns that are all the same size and do four rows that are all like 10 BW, 10 times the view per width and it just does it for you. And you see if I expand it and collapse it, it's always going to be five columns and the browser is going to be, I mean the rows are always going to be the same. They're there. It's white space, it's empty, but the browser knows that they're there. Now this one is not as responsive as we wanted, right? Because we usually don't do this with galleries. We don't make them shrink and then we don't make them expand. We usually want them to break and for that we usually use media queries. We tell the browser, hey, browser, when you get to this point, please stop growing, stop shrinking, just bring it to the next line. Now we can do this with grid. The code is a little bit complex, but basically what it's saying is, hey, I want my columns to auto fit and I want them to have a minimum of 120 pixels and a maximum of whatever the other columns are. So they're always the same width, all of them, but they're never smaller than 120 pixels. So what happens is when something gets 100, it just goes to the next line and it goes to the next line and it just goes to the next line and all this happened with one line of CSS and that's amazing. That's something that we have not been able to do until now. That's one of my favorite parts of CSS grid. Then you have a friend, they're a designer, they're an artist, right? And they're like, I want this layout and if you think of this layout in the past, you're like, whoa, how do I do that? Okay, so maybe I have negative margins, maybe absolute, maybe fixed things. So with grid you can actually have this concept of implicit and explicit. Implicit means just things fall down naturally. The way you add one thing and then the other one, you add an image, you add a text, you add something, it just goes below. Explicit means having a grid means you have lines. So you can just position things whatever you want. So for the red one, I'll just tell it, hey, you are going to go from line two to four and one to three, you're going to go from three to five and two to six and you're going to go from the purple, you're going to go from row four to five and call them on the fourth and they just, they go whatever you want them to go. And then the code on top is the same exact code as the previous, like nothing changed on my CSS. All I did was tell this individual once, please go somewhere else on the page. And what happens is, you know, I'm messing around with where I want them to land and if I just move a few of the numbers, you know, the containers just are moving around. And that is pretty awesome. One of the other things is this is a little also more complex, but just so you know, if you're working with teams and you're working on a template and you're building something, it's also possible with grid to actually give your sections names. So for this one, I'm using grid template area. I built an area and the area is going to be, it's going to be a header and an ad. It's going to be a content and a sidebar and the footage is going to be, God bless America. You can do an emoji. And so, and it's going to be a gap on the rows only, not on the columns. So the first grid area is going to be header. So since I called it header, you notice that on my template area above, the header is only red. And then the green one is going to be the one that goes on the sidebar and then the, well, that's wrong. But the emoji is going to be at the bottom one. So you can actually give them names and you can move them around. So if you think of how to shuffle stuff around, all you got to do is do your template areas and then you move this around as you feel like. All right, so I'll do a few more demos in a minute, but I just wanted to go over when, when is now, right? Just a little recap of where we are and where we started. March 8th on 2017 and support for CSS Grid is at 0.32%. Now looking good. Three weeks later, boom, 26%. And then the thing that happens is Firefox released it, Chrome, Safari, Opera, they all released Grid at once. And this had not happened any time before. It's the first time it happens. The reason being is that before a browser would just release it and then they'll change it as it went and then people will start using it and then the spec will change and people will get upset and stop using it. What they did here is they all worked behind doors. They released it and they released it on the newer versions of the browsers. People will play around with it, people with feedback, people will iterate. And then when they were ready, they sent it into production and it was everywhere. And that was, that was, that was just last year. Yeah, so we were at 26%. Jensin was wrote, she wrote on Twitter, three weeks ago Firefox, two weeks ago Chrome, last week Opera, today Safari, yes, CSS Grid is here. And Twitter being Twitter, people started writing, I don't know if you can see it, we're anywhere on edge, come on edge, what about edge? How about edge? Okay, edge, CSS Grid is not here because I don't forget that Apple users are not the majority. So yeah, people want it everywhere. And there's always, this is, you know, this is with this craft that we do, there's always this. You know, your website is going to look wrong in someone's computer. So as of October 17 of last year, edge was quick to update it, it launched. So as of October 20, boom, we have 69% of support for Grid. Moved to a month ago, we're 82.8%. Now last couple of days ago, I took the screen shot, it's 84.2%. So it's here, right? Some of the browsers that don't have it are older versions of Chrome, Opera Mini, but the Samsung just released support for it. So moving forward, the support was going to keep growing and growing and growing. If you look at usage-related, right, most people use Chrome for Android or Chrome, Safari, so its support is there. So there's no reason why you shouldn't use it if there's some browsers in India and China that don't support it. That's what some of that 16% is. They, you know, they have, if you have a client that needs to have support for those, there's a great little trick called add supports for CSS where basically you put your grid stuff on that query and if the browser supports it, use it. If not, use the old stuff. And that supports it's highly supported. That's redundant. But anyway. So if you want to learn more, there's a ton of resources out there. It's a hot word. It's growing. Everyone's excited about it, but I will definitely suggest going with Jan Simons and Rachel Andrew. Jan Simons has a website called labs.jansimons.com where she does a ton of demos. I think she started a YouTube channel. She has her own podcast. She has a new talk on, it's called in street, in, I can never say that word, ESL. In string stick design. And Rachel Andrew, she wrote the book on CSS. She's amazing. She has a course on CSS. So if you want to get started and want to learn the instant house of CSS, definitely recommend her course. She helped build CSS grid. Listen to her podcast. Does she have a podcast? I don't believe it. But anyway, she's awesome. Both of them are awesome. Go check them out. Go follow them on Twitter and just start from there and look at everything that they share. All right. So, demos. I don't know if I can go faster than the previous. Let's see. Fingers crossed. That works. So let's do some demos. What I'll do right now is, let me see if I can bring out my, just so you see more or less how I'm starting to use it with, I have to do right now is, where are your mouse? One second. Here it is. Let's mirror this. Alright, so first demo. Actually, the resolution is slightly different. So this is a website for a site project that I started building. Can you move this out of the way? One second. Now you can because of the, let's see if I can make it stick out. There you go. So this is just a website that I started building for a site project. You know, freelancers and their site projects. It was the first time ever, where I, you know, so that's a site project, so I got excited, you know, let's use Grid if it breaks and I'm not in trouble. And it was the first time ever that I actually went into Illustrator, which is a designer's tool for manipulating vectors. And I built my layout and I just moved stuff around and I said, you know, I'm happy with this. I'm going to try it and then I try to translate it into the browser instead of me starting from a theme or from somewhere and trying to, you know, reverse engineer my way around it. And, you know, it's just an open transit. There is a toolkit for people that want to learn about how run subways. And it's pretty awesome because I got to, you know, imagine it looking like a subway and I did some, you call it subway here and you call it Martha, right? Yeah. So let me see, what is the homepage? Will it load? And my sections are going to be lines and subway stops and I'm going to have a ton of white space and I'm going to have some things go inside and then some things are broken but you're not seeing that and I'm going to have some project news and, you know, it was just a fun thing for me to try out. So the way I did it with grid, if you see this it's a little hard to see what's going on but once you see it with grid it starts making sense. I, you know, with the developer tools it allows you to see your CSS on the site. So I just go to the class where I built. Let's go quickly here. Sorry for the resolution is a little low but it'll start coming together here. You see here it says display grid. So if you click on this little waffle icon you'll notice that I've built some columns and I gave them different weights and you can actually see the columns at work here, right? It's one column, two columns, three columns and then I just place my things. I did some hacking with borders so this has a border bottom and a border top. So I played around with this one and then if you start seeing this one it's just me setting a grid before I even set out some content. And once I had the content where's the other grid here? Primary, no. Primary, no. This is a, if you work with WordPress you'll find all these right articles. All right, home section, right? Here's my template columns and my rows and it should say display grid here at some point of my CSS here. If I click on it you'll notice the same pattern. So I said, you know, set one, two, three columns and I set some rows and then I just place my content. The great thing about this is I got to play around with the layout so when you get to a certain point it jumps around, it gets smaller, things get, your rows get deleted, columns get shuffled and overall it just works the same way for all of them. Now, I don't have to use grid for all of them. For this one I just went with flexboxes because it's a very unique, you know, it's a very straightforward, I could have used grid, I could have used maybe not even flexed but for the other things what I was trying to just explore and see how I could move things around and just put them in an unconventional way I went with that. So that's one that's almost ready to launch. I will say, you know, I'm wearing no content so that means it's 30% done. Then we have Harlem Youth Soccer which is the work with FC Harlem the program that I work with it's a community, an awesome community organization that basically helps kids through soccer become better citizens become better people and this one I was trying to give I don't know if there's enough contrast but there should be a background here that overlaps so I wanted to have that background on it, that image overlap without using negative margins so what I did here this is this one, yeah if you see it with grid it all starts making so much sense all I did was it was much easier to actually see it here all I did was this I set up some grid, some columns and I told them I told the image hey you're gonna go from column from line one to three right from column one and two and then the rest of you are just gonna go on the next column and then if the text gets smaller and then just break it delete that first column put everything on column two and then go down and then there's no media queries it's mostly CSS it's super responsive I don't have to worry about looking at all the break points and then making sure that nothing is overlapping and it's the same for all of them I just I'm working through my site and you know as a designer it's also your own website it's the worst thing it's always under construction so don't look at it just look at this and one thing that I did I was trying to have some fun with a grid and this is all CSS I just put a grid together and looking at this it looks pretty awesome right it looks a little JavaScript-ish it's so funny how I say it's pretty awesome I don't know it's okay and if you look at the grid that I built for this and this is all built in WordPress what I did is I grabbed a for mine I grabbed a a clean team from underscores started working from that and just adding a couple of lines some code here and then you see here's the magic the display grid click on it and you see that I did an 8 column layout and I let my rows my rows just grow automatically and with CSS I'm just moving things around there's no JavaScript at all with CSS I just say hey some of you move to the left some of you move to the right some of you dance to the bottom and then just after 10 seconds just come back and that's all that's doing it's a little jank it's not supposed to be janky but let's see it might be my my connection I feel like I'm on a client presentation where things are not working yeah so yeah and you see it's 8 columns then at one point I just tell it you know what why don't you just go to 4 columns and it just goes to 4 and it keeps working as intended and I'm always iterating always changing things but when you go all the way down well you can I think because of the resolution but ideally you should work on mobile this is the part what I told you to trust me so these are more precise that I'm working on I'm working on a couple more that I'm planning to implement as soon as the client lets me share but the way I started doing it is I didn't go full in and this is what I'm trying to say just try to implement it here and there try to see if you can put it on a plugin put it on a snippet put it on a footer and the way I did it I just started building like a small playground where I just started adding my code right now I have already up there I have a few more that I have coming one of them is I really like this more effect which is based on I don't know what is it based on but it's an awesome book called Poemotion Poemotion where you buy the book and it comes with a little plastic with holes on the lines and then when you scroll that's a pretty awesome thing that looks something like this and it just that's an optical illusion where it looks like things are animating and I wanted to try it I wanted to see hey, you're supposed to be able to overlap things on CSS without hacking things so I actually put it together and when you see it with grid it also makes sense right let me delete this which one are you inspected that's how you get the if you want to know how do you get to this thing that I'm in just right-click do inspect element and then on the left is the HTML on the right is the CSS and sometimes you get a right and you get a right so if I do display grid right here no this is not it I have to go to the child here you go so this one has one the bottom one has a couple of rows and then the bowls are somewhere in here where are your bowls so you see how they're here you go it's a bowl row wrapper here I just put my bowl I did they're demos right so it's about a hundred columns and each one of them is 6FR they're all the same width and then I just started placing my bowls wherever I felt the you know the the illusion will work based on the book I just grabbed them from one of the pages in the book so that's one another demo another one that I started working with is one of one book that I really like it's called making and breaking the grid I was like oh this sounds like something that could work for this this is the book cover and I just try to imitate it so it can pretty awesome it's not responsive that's a problem but since it's been a demo I was like I'm going to make it the same exact layout and you notice a few things that are working pretty awesome here it's there's some empty square here there's a square well that's not a square sorry it's a rectangle that's over things are overlapping things are starting from here and here and there are no negative margins at all all I did is build a few grids filled the main layout and so if you see my book wrapper looks something like this you see they start to start to see some familiar things right grid rows and grid columns and if you see for example my back rectangles wrapper which should say grid somewhere no this is a flex still has to go to flex for a lot of things there you go so it's just I told it to repeat 88 pixels 10 times and then repeat 124 pixels 6 times and it just goes and it goes it goes so it just fills it up for me I don't have to figure out anything that sounds like I'm not doing anything I don't have to well that's one you know I'm doing this silly thing where I when I travel I just jump for no reason and I wanted to put them all together and it's pretty cool it's pretty responsive with no media queries and all I did it's also the same this is this is a good example of the implicit things that you can do with grid I just did this is one of the simplest I just did a grid that's 10 by 10 each one of them is 5VW 5VWs are an awesome view for width basically your content grows as the browser grows and then I just did a 10 by 10 all over my images and then I just went to my image and I said you're going to go on column 2 or you're going to go on column 1 you're going to go on 3 and you're going to expand until column 7 maybe you can go to 6 maybe you can go to 5 you know I just positioned stuff around the way I felt like it and then I stayed the same to my rows you're going to start a row 1 you're going to start a row 2 and that's it I'm going to tell that hey CLA what do I call my computer hey computer thingy every third every fourth every fifth just put things on a different and that's it it's doing it's making it look like it's random but it's basically just the same the same short lines of code that go over and over again and it's just some pure CSS and I think this is around I want to say 100 lines of CSS which is very very very little now going back to remove this display now here I want to go back to the presentation it's my first time doing the demo so sorry I'm taking it a little longer between the switches but anyhow this is the last that I want to leave you with you know Chris Collier is one of my favorite web designers and he wrote a tweet that says just a little reminder that it's about a hundred times more important what you build and how you build it so we take like what a lot of people say as the gospel as to what we have to use and sometimes we just don't start because of that get started play around break code do things and look forward to seeing you speak at some point and that's me thank you questions yes sorry I didn't turn on the slow motion any questions that I can answer slowly about grid or anything yes well you don't have maximums with either flex box of grid the thing is that we to build this boiler place templates that you know they're the 12 cause they're easy to use and they're consistent and the way they've done them they use 12 but they don't have to be 12 you can like with the bouncy bolts I have a hundred so with flex you can do the same it wouldn't make much sense right because because of the screen size I guess you had a huge screen you could so you don't have to you can go an even number an odd number it wouldn't matter yeah any other questions everyone's ready to go yeah yeah they all have it actually they have a that's a great question so she's asking if the other browsers have the same tools or similar tools to code yes so Chrome Chrome has been sort of the leader in the industry when it comes to developers they have pretty awesome tools when it comes to JavaScript pretty much everything page inside speed the the reason I think Firefox is much stronger when it comes to CSS Grid is because Jen Simmons works for Mozilla so she has been giving them feedback they've been releasing updates really really fast and Chrome actually has some sweet grid tools now where you actually hover and it shows the grid and it's I have a bad habit where I go to Chrome and whenever it's grid I go back to Firefox then I go back to Chrome Safari is like Safari I think they still on yearly releases for the browser so it takes a little long for you to get something on Safari but they also have developer tools for the other ones I'm not sure that's a great question I don't know what they offer well thank you everyone thank you so much for me and