Mobile-First Responsive Build #6 - Grid Basics

Key Takeaways

okay then gang so as I mentioned in one of the earlier lessons we are going to be using CSS grid to control the layout of several different sections in this website now CSS grid is a feature of CSS that allows us to create great style layouts using pure CSS and we don't have to rely on libraries like bootstrap or materialise for grid layouts so in this lesson what I'm going to do is give you a quick overview of how CSS grid works and run through some of the basics to bring you all up to speed but if you do find yourself wanting to learn more in depth about CSS grid I've got a whole playlist here on YouTube about it and I'm gonna leave that link right down below so that how does CSS grid work well imagine we have a section of our website and we split it up into a grid of columns and rows now we can use this grid to layout our content as we want for example on the first row we could lay out two different items which each take up three columns in width so it looks something like this this is our first element and this is our second element and they both take up three columns right then on the next row we could lay out a single element which takes up all the width of the row so all six columns then on the next row we could have maybe three elements that take up two columns each and then on the last row we could have six different elements and they all take up a single column each and we're using this grid that we create with CSS to layout the content how he wants you here for each row of content that we have and that's basically it in a nutshell in its most basic form now in this example we've got 6 columns 1 2 3 4 5 6 and we have 4 rows but we can have as many columns and rows in our grids as we want now just a little bit of terminology now the lines in the grid and known as grid lines and they start at one so one on the very left then 2 3 4 5 6 7 and the same going down for the rows 1 2 3 4 5 so notice this if we have a grid which is 6 columns the number of lines is always going to be one more 7 1 2 3 4 5 6 7 if we a grid that was three columns the number of lines is one more which is four okay and the same is true for the rows as well now later on we're going to be using grid lines to place our content in different places on the grid but for now let's just have a look at how we actually make a grid like this in CSS now the first thing we need to do is create a grid container so imagine we have a div over here and that contains these three elements and we want these to be displayed on a grid what we need to do is make this div right here a grid container and we do that by creating a selector to target that div in the CSS and setting its display property to grid that makes this a grid container and then automatically everything directly inside this every element directly nested becomes a grid item and we can place those grid items on that grid now now the next thing we need to do is define how many columns that that grid should have and what width each column should be so in this case we'd say grid template columns to define the different columns on our grid and we want three columns so we define three different widths 200 pixels 200 pixels and 200 pixels so that makes this into a grid container with three columns and each column would be 200 pixels in width now you can use pixels if you wish for defining your column widths but what I prefer to do is use something called fractions and that looks something like this so it's a grid template columns one fraction one fraction one fraction now the difference is the the fraction unit right here will mean that whatever the full width of the grid is then each column should be one equal fraction of that grid so if on large screens the total width of the grid is and at no 900 pixels then each column is going to be one fraction what equal fraction of that grid so they'll all be 300 pixels in width but on a smaller screen imagine it's 600 pixels the total grid container width then each fraction would be 200 pixels right so it's sometimes nicer to use fractions rather than pixels for that reason so in this case we make great with three equal widths in each column and it's going to look something like this and automatically it's going to place these three items in each one of the columns so now we know the basics of how to make a grid let's put this in action and just create a simple grid in our code so what I'd like to do is a quick example of how to set up a CSS grid and how to put elements on to the grid so I'll be doing that on our projects down here we have three projects and like those to be displayed on a grid now if we take a look at our index.html file and scroll through the project wherever they are right here then we can see this right here this div is surrounding each of these projects and each of these projects is an anchor tag so we have three of those inside this div and that dave has a class of projects and grid so let's just use this projects class and what we're going to do is make this div a grid container therefore all of these will automatically become grid items so in styles dot CSS I've come right to the bottom because this is just a test and in fact let me just do a little comment to say grid testing and underneath that I'm going to then use the project for my selector I'm going to set the display to grid which means now it becomes a grid container now I also want to use that second property which is grid templates - columns I remember this is how we specify what columns we want on the grid and what width each column should be now I'm gonna use fractions and I want three columns so I'm going to say one if R 1 if R 1 if R so that means we have three columns and each column is a single fraction of the total width of the grid now the grid should just be the total width of the page by default because it div is a block level elements and by default that means it has the full width of the page or whatever container it's inside of so this one if R should be a third of the page each column should be a third so if I save this now what's going to happen is automatically these three grid items will be placed that grid one in each column that happens automatically we don't have to do anything else so if I save this now check it out they all go side by side and each one of these has 1/3 of the width of the page because each column is a single fraction of the page so let me now just make this larger and you can see as we make it larger the grid becomes larger and each column will become larger as well and when we make it smaller the same happens it shrinks so if I just inspect this Elbon and by the way I mean Google Chrome over here let me just zoom in if I now click on this projects grid right here we can actually see when you hover over it the grid columns can you see these three lines right here or rather three columns so we have one on the left over here one in the middle and then one on the right so that is the default behavior of these grid items that automatically placed inside a column each now what I'd like to do is just make these items go into the center of their column because at the minute they're sitting on the left of each column so what I'll do is come over here and say project a and then I'm going to say text align is going to be Center and that will centralize any text and images I'm also going to say the background of these things is gray just so we can see them and I'll give each one a padding as well of 20 pixels so let me save that and come over here and now we can see that they're all centralized in their own column now at the minute we can't distinguish each column from the next because there's no gap between each column but fortunately when we use in CSS grid we can actually add a gap between the columns and the way we do that is on the grid container up here and we add on a gap property and I'm going to say 10 pixels so if I save that now we can see we get a 10 pixel gap between these items now if there was another item inside this grid container what that item would do is automatically go to the next line to the next row okay because we only have three columns and if we have four grid items inside the grid container then it's only going to allow us to put three items in that going across because we have three columns and it's going to take the next one and put it down here in the first column of the next row so let me just demo that I'm going to copy this thing right here and paste it down below and let's just change this to number two so we can see the difference and save it and now if we take a look we can see the next one has gone down here and that grid gap that we just applied with this gap property also applies between rows between columns and rows all right so there we go that's the basics of CSS grid in the next lesson I want to take this one step further and show you how to make a twelve column grid