CSS Grid Layout + React: Intro (Part 1) - The Ease of Grid

hey everybody and welcome to today's session I'm going to be showing off CSS and grid you know react app basically the format for today is to show off CSS grid talk about what it is why it exists and show just how intuitive and powerful it is to work with I'm also going to compare it to a flexbox and show how a CSS grid and CSS flexbox can work together and how they have distinct use cases and are definitely not contradictory and I will then show off just writing some CSS grid we're going to do a basic business site boilerplate kind of layout and let's just show you how little code we actually need to write to have grid just handle our layout for us so without further ado I'm just going to create a react app and I'm gonna use create react app for that because it's the easiest way to get a react up up and running I just need to pass it a name and we're going to call my app CSS grid react because I'm super creative and while that is pulling down all the stuff and magically putting it all together I just want to show off the mdn web Doc's I think this is the best reference for CSS grid they've got some very simple examples but also reference for all the different things you can do with grid including the properties and functions will I'll put that in the show notes as well as CSS tricks guide to grid CSS tricks as much more polished side of course a bit more in depth into real-world cases and again if you if you want to do something specific with grid CSS tricks might be a place for you to get inspired so yeah it looks like our app is ready to run so I am just going to get that app up and going let's open it up in our editor first and so we've got our app here and we're just going to be primarily working in the FDA s and app dot CS files today before that I'm just gonna start this app up so the development server is running that's gonna be epical host 3000 when it's ready so it's running I'm gonna just hide this terminal here it'll be running in the background this whole time and I'm just going to open up these two files that we'll be working in and I don't I'm gonna actually delete everything from here because we don't need any of that and same for here I also get rid of the react logo and so now we've got an empty react up here basically I'm going to create a container that's going to contain our our grid so there we go it's working I'm gonna first just show that it exists by giving it a background color and and then I also need to give it some height so I'll give it a hundred view height and a hundred view width so it takes up the entire viewport here this should all turn aquamarine if I target the appropriate class there we go so that's up and going before we start with the grid I'm just going to lay out sort of my vision for it it's again just gonna be a boilerplate sort of business site so up at the top left I'm gonna have like a logo for the business and then like a header I'm gonna go like ninety style or early 2000 style and have a vertical navbar on the left there and then like the main content and the middle and at the bottom I'll just have like a footer with some links or something so this is going to be our design spec for our app and we'll come back and reference this throughout the session today all right so I've got my design I've set up a container we're not using grid yet but to do that all I need to do is set display to grid and now you can't tell but this is now using grid to layout its children but it doesn't have any children yet so let's create those if we count these items we've got one two three four five so I'm going to create five divs we're just called them divs right now first is going to be a logo then we're going to have a header nav content and a footer and then I'll also change these two to be that as you can see as I save that we got the layout here and you can see that it is using grid if I comment this out this is without grid this is with grid so these are being Auto spaced and we'll come back to that in just a second we're just going to name these so we can appropriately target them when we get over there back to the CSS and call this one footer cool so like I was saying this is your auto space so the way the grid will work is if you don't have a spot explicitly stated for an item it will just create a another row for it and place it there we could do you use grid auto rows and like set these to like 100 pixels so that means that everything will be laid out on a grid if there's not an explicit grid area for an item it will just automatically create a row for it and that row will be a hundred pixels so as you can see now that's working by making each one of these divs a child gives a hundred pixels but we're not going to do that for our grid since we have this kind of layout it would be easier to what are called grid templates so I'll first to find the eros and the way that this works is that for the template you just give the sizes of the rows and every size that you give is a CSS grid understands that as another another row so we need one two three rows so I'm going to say for the logo and header that those are not going to be that big so I'll make them a hundred pixels for the nav and content that's going to be sort of the bulk of our of our page here so I'm going to make those 500 pixels and then the footer let's make that another 100 pixels so as you can see it created those rows for us the first row is 100 pixels second row is 500 pixels and then the third row is 100 pixels and then these two items which we hadn't specified a row for them they don't know where to go so CSS grid will use the available spacing left and automatically size those one nice caveat about about that is that if for instance this content was more than however much space this is it will actually fill to that space with grid so you don't have to worry about over overflow that much but I'm getting a little ahead of myself so let's create the columns grid template columns and this works exactly the same way that rows does but this works for columns so we need at least two columns that's going to be the simplest for our design here there are use cases where even if you only have two items you might want more than two columns here to sort of space things the way you want and a lot of designs especially modern designs have sort of layered spacing of items but we're not going to do that here we're going to keep it simple so let's say our first column which will have the logo and the nav that'll be our column one let's make that 100 pixels because it doesn't need to be that wide and for the content let's make that like 600 pixels and save that we could see that that's working not exactly as we want yet but let's start placing the items you go specifically where we want them in the grid so to do that I can do this where well first let's change the background color so we can actually see something let's use elspeth so we can see that that logo is now taking up this whole grid area here we can say first where the where in the row this item should start feeling so for this we're going to use the grid number which is for the row it's one is in the first row here and then it's in also in the first column so let's keep that in mind so it'll start in in one and then it will end in two okay so it will start in one and end when it gets to two so it won't take up two which is here but it will stop once it gets there then we'll do the same thing for columns so grid columns start it's in the first column and then grid column end and it will also end when it reaches the second column right so so that is placed explicitly where we want we have the these explicit rows and columns in our template and we have placed it explicitly where we want in this first slot here but this is kind of a lot of code and one of the nice things about CSS grid is that even though this already is a lot simpler to lay out an item than many other solutions that we've been doing for decades in web development we can still shorten this a lot so I'm going to remove the grid start in grid row end and just use grid row which is a shorthand for grid row start Ingrid row end and what it takes is the grid row start first and then a slash and then the grid row end so that was the same thing as grid row start one word row end one it's just a shorthand for it now we can do the same thing for grid column and just delete what we had before and voila that is the exact same thing so I'm just going to copy this down because it's going to be a very similar approach I'll just change these to some different colors something like that alright so let's place this appropriately so this will still be in this first row but it will be in the second column and end in the third row right and we again need to target that appropriately that is the header so there we go now another thing we can do since these are just filling up one grid area we don't really need to say when to stop we can just say fill up this one grid area so we can even shorten this to just that and same here and same here so that will be the exact same thing since we're only filling up one space now we can go down to NAV and we can say okay well this is starting in the second row and that's all it's going to be in and it will be in the first column right because all the way over to the left so now we ever a nav color now one thing you might notice is these things are touching and one thing you might instinctually want to do is like set margin to like 10 pixels right or set it all the way around now this can cause a lot of problems for your design you can get overflow you can get compacting I would say stay away from margin and padding here if you want just space between the grit areas and what you can do instead is just say gap and now all of our items will have a 10 pixel gap in between all of them so that is I mean this is one of those very powerful very simple things in CSS grid as grid gab so let's continue here I think we're on content so content will start in the second column or the second row excuse me right is the second thing down and it will struck they will start and only take up the second column all right so it's right there so it's it's mapping to our our design here and let's go to footer and footer will be in the third row right it's at the bottom of our three row grid and for the grid column now we want the footer to not just be in this one spot right we want it to span the whole grid so what we'll do is just the same as we did before button will have its band tube so we this will start grid column start in one and grid column end in three or when it gets to three another way to do this and I think a more powerful way to do this if you want something to just sort of span to the end is instead of explicitly stating what column to end at you can say and at the end so a negative one will be the same thing in this case it will go all the way to the end that's very useful for in the case of maybe you're coming back to a grid that you've laid out items on before and that design spec has changed and you actually need a one more column or one less column well if you write it like this this will always span to the end all right from the beginning to the end cool so that seems pretty good so far but we can actually do a lot better one thing we can do is we see here that this is only taking up this space and we have all this empty space well I think for this design we kind of want it to take up the entire screen right so we can see that where our containers already taking the whole screen but because we've explicitly stated the size of these rows and columns it's only taking up that that size since that size is available inside the entire container so what we can instead use our fractional units these are fr-s is another kind of length unit in CSS it's I believe specifically for grid and the way it works is that one fractional unit 1fr is just equal to one fr it's relative to the other other sizes in the in that line so if I say one of our five fr one of our this will be the same relative sizing as a hundred pixels the 500 pixels 200 pixels but because we're using fractional units it will take up all of the available space so we can do the same thing here so we do one of our and six fr and say that and now we're taking up the whole space now personally I think it's a little bit crowded so I'm going to reduce this down a little bit so we have a bit more space for a logo and our nav but you can see that that this is just a a much nicer way of laying these out you don't have to deal with calculating the right size pixels different viewport sizes it's always going to take up the same amount of relative space now there are instances where you might not want your nav to just get huge and you can set pixel size for that if you want in here along with using FRS to so one other thing we can do to start cleaning this up is instead of having grid template rows and grid template columns we can use something called grid template which is another kind of shorthand so great template works just the same as a crude template rose and great template columns but I can do it all in one line so first you define your rows so we can just do the same we're doing before and then you slash and then now you defined your columns so we have the same code as these two lines in one line so we define our grid here now one thing I want to point out is that I am using Firefox here even though that is not my default browser I'm a chrome fanboy but Firefox has at least currently the best grid layout inspector I think of any browser that I'm aware of and what you can do is you can turn on the inspector and you can start displaying where your grid is so now you know exactly where the grid lines are the grid gap as well as where the rows and columns are right there they're all numbered here for you so this is a really powerful tool especially as you're laying things out in more complicated layouts to see exactly where your Gradius now we can do something that I think if I had to pick one thing is the coolest thing about CSS grid and that is what are called grid areas so it's pretty remarkable it's one of the coolest things I've seen in any kind of layout system what you can do is you can use names of items in the grid as your layout so we can just say grid template areas and I'm going to let's do this I'm literally going to copy our design from over here and place it right in here and what this is going to do is now look it will reference the template here so it knows what the rows and columns are or I would do it automatically if you are not explicitly stating it he'll use the implicit grid and it's saying a logo should be in the top-left header should be to the right of that now should be a second row first column content should be second row second column and footer should be second row or a third row first column so how we can start targeting this is instead of explicitly saying where it should be placed we can just say grid area logo and we could do the same thing here grid area header and the same thing all the way down the line area nav grid area content grid area footer let's make sure we've got all of our syntax proper there so we could say that and I did something wrong footer content nav header what if I'd done so the footer is there well one thing I know we should do is that there we go so we were saying just go to that first a third row fourth column there what we actually want is the footer to go both right so there you go we've defined our we've said display grid so we're going to use grid layout we define the grid template for the rows and columns we've added a gap and then we've defined our design here with words visually and then all we've had to do is say what area these items are in that's it pretty remarkable so one thing I promised at the beginning was I would take a look at flex and where I think flex and grid play really nicely together is inside of a grid area to use flex so I'm going to show that off there are other cases where you might want to have a grid inside of a flex maybe you're laying out a bunch of images of like posts or something like a Pinterest type thing and there you might be using a grid inside of that that container and it might be a flex somewhere on the outside but I'm going to show off a common use case before I do that let me go right back to this areas and show you in Firefox instead of displaying the numbers I can display the names of the areas I think that is really cool so again highly recommend the Firefox grid inspector if you're working on anything with grid layout and check it out in Firefox so yeah I'm going to just work on this logo here for a second and use flex so I'm gonna take out the word logo and this is not going to be a container for like let's say logo and business name so let's call let's make a couple divs let's make well let's make three so we'll do like a logo and here we'll do like business name and then down here we'll do an established 20 20 and so now we got two there I'm going to take off the grid area names or inspector here and now we can see that those are just laid out inside this great area with with no styling because I haven't styled this this logo but I'm going to use flex so I just do display flex and now they are flexed now the default flex Direction is a row so this is implicit when you use flex that it will be in the direction of row so if you think of great as as two-dimensional rows and columns it helps to think of flex box as one dimensional so either row or column so by default it is column or it is row excuse me and I will change it to call so it's going up and down and then I'm going to Center all of these things because I think that that would be nice oh and it's also one of the very powerful things in Flex box [Music] they do that right justify content center oh it's all line items there we go so it is centered now so yeah that's great we can go through and sort of style all the rest of the stuff with a mixture of grid and flexbox but we won't get into that in this episode we might get into that and more in depth but this is just an intro up so I'll leave with one other note which is about the practical uses of grid inference oh not all browsers currently support grid the grid specs been out for a number of years now but it is not fully supported in older browsers so even though over 90 percent of browsers these days support the grid spec not all of them do so if you're working in production one thing you might might you do is to do a media query to make sure that the that the sorry excuse me that the browser uses arcane support grid so you would just write grid 0 I believe and wrap all of that so now this styling will only get called if grid is supported and we can just like change that you can see we're not supporting group this grid one two three one two spec because it doesn't exist so this process doesn't support it so so that's one way that you can use it in production it is a lot easier to write crisp layouts as we saw here these kinds of layouts would be a lot more difficult even something this simple would be a lot more lines of code which leads to more likelihood of bugs so weird is definitely valuable but for safety's sake to make sure that your users can actually see that kind of layout write a feature query for grid one other thing you might want to do is as you see when we start shrinking this down it would look really bad on mobile so one way to solve for that would be to wrap this code down here in a media query to make sure that the screen size is large enough and to do that I need to write well I can just cheat I think it need to do like the actual screen but for this example I'm not gonna look up the syntax exactly and num1 there so now this style will only apply if grid is supported and we are not on a device or a screen that is smaller than 768 or view that's one so you can see that grid is gone now because we shrunk it down below 768 so what you could do is here you would write like mobile design layout here and whatever that is and then up here you would do like on grid fallback here so that way first a user would have whatever your non grid fallback is for your design so some kind of code that would give a similar layout but not using grid then if if the browser supports feature queries in grid you will get the grid layout and the first you will get is mobile and then you will get the right let's call it desktop version of it so progressive enhancement of the of the layout here that's how you do it in the real world another real-world use case is prototyping so as you saw it was extremely quick and easy to create this and to change it to change this entire layout I mean we can just you can just play with the the sizes here and get a different layout instead of going to each item and changing that around it's very quick for prototyping so if you are working on like a new product and you just need to get something up and running and to play around with until the design is right this is a great way to do that I'm sure the developers on the rest of your team when you're working with are going to be in browsers that's important rid so yeah that is that is it for this session if you have any questions or comments things requests though for other topics you'd like me to cover just leave those in the comments and thanks see you again soon

Channel: Erik Thorelli

Views: 9,521

Rating: 4.8602619 out of 5

Keywords:

Id: sA_glquejwE

Length: 31min 19sec (1879 seconds)

Published: Thu Apr 09 2020

Reddit Comments

[u/OmniscientOCE]

You say "UHHMM" really loudly before almost every single sentence. Content seems pretty good though nice work.

[u/esthor]

I'm looking for honest feedback about my first video tutorial. What's good? What's bad? What might I do better? My goal is to learn how to do these things well, so they are worth viewers' time.