10 Examples of CSS Grid - Getting Started

CSS grid is one of the coolest features to hit CSS in years if you've been putting off learning more about it this is your perfect opportunity because I'm going to walk through ten examples to teach you more about getting started with CSS grid so let's go ahead and dive on in alright so what I've got set up here is like I said ten different examples that we're going to build this is in this github repository that you have access to a link in the video inside of each one of these examples you have a start and a finish set a file so the start and finish HTML is going to be basically the same all of the structure all the content is going to be inside of these HTML files the difference is the CSS files that they referenced one the finished one is obviously finished and the start one is empty so that's where we're going to go and add all of our CSS to make these examples look the way they should now if you're just getting started with CSS grid which I was in the last week or so one of the best examples of learning CSS grid or flexbox or things like that is from CSS tricks so you can check out the complete guide on grid from CSS tricks there's also a course by West box called CSS grid that walks you through everything you need to know about CSS grid with the examples as well and then also a video by a friend of mine practical CSS grid on udemy that I've gone through and learned from as well so those are the examples that I've gone through and getting started and now we'll go ahead and dive into doing our examples here alright so we'll go ahead and get started I've got this project checked out in vs code over here and you can see with this starter with the first project I've got open the start CSS and start HTML inside of the HTML I've basically just got three different grid items which are the different colors that you can see in here and so there's the red there's the green and there's orange with just some dummy text inside them so we want to start by laying these out side-by-side so we'll grab our grid container and we'll do a display of grid all right and nothing really changed there so what we need to do is define the columns in our grid so grid template columns and we could do something like define three three columns that are hundred pixel wall pixels wide that doesn't really look that great what we want to do is take advantage of the available space so this is where something called the fractional unit comes in where what this means is each one of these will get a piece of the available pie that's out there so the entire width that's available each one will get 1/3 of this and then we can add quickly just a grid gap here by saying a grid gap 20 pixels so we're able to lay out these things side-by-side with a little bit of gap in between which is really cool we could take this one step further and we can add a media query media and we could say max width 786 pixels what this means is these styles inside of this query will only be taken into account for screens less than or equal to 786 picks pixels and when we do this we just want to change grid template columns to be 1f R and sorry this is going to go inside of the grid container so we want to select that first and then inside of the grid container set the grid template columns to 1 fr you can see that that went ahead and just put them on top of each other now if we make this bigger we should see when we hit the 786 mark we see we get this side-by-side and just so you can see this let's open up our our developer tools and you can see the numbers up in the top right corner up here and as they go down to what would be 786 you get this the resizing but because I am zoomed in to a higher percentage it was actually doing it at a higher pixel now we can see if we scroll down to 786 pixels we get this responsive grid 3 column grid really really simple the basic example of getting started with CSS grid which is great to start and then you can combine that with a media query basically to just kind of redefine the columns in your grid and then they flow down like so this is a very common technique where with more horizontal space you have things laid out horizontally and then once you scale down or once the screen gets smaller you basically stack them on top of each other all right really cool now let's open up example two and this one's going to be relatively simple it's just going to be a centered piece of context now in CSS without flexbox and without grid centering something with an ax did was kind of difficult and got a little hacky and with CSS grid we can do that a lot easier so let's let's get some more room over here not trying to do a whole lot here just like I said trying to Center that thing inside of a grid so senator content let's open up start CSS and start HTML inside of the HTML we've got our grid container and then the content inside of it so let's grab the grid container and I want to make sure that it has a height to it so I'm going to set the height to be 40 view Heights and in the width to be 60 view width I don't need to take up the entire page I just want to make sure that it takes up more space than that content that is inside all right so we save this and we'll see that does add the width and height to our element and then we can also just center that thing in the page with the margin:0 auto trick so all we've done is really just I create the container for the elements that we want to Center so to be able to Center items inside of a grid you can call justify items Center and then a line items Center if we've already put in display of grid so now we should see that this actually centers the content so by marking this as a display of grid were able to Center things with justify items and a line item so what those both mean justify items is to Center your content horizontally and you can see here it doesn't take up the entire width usually block elements would but since this is inside of a grid and we did justify Center it's going to only the amount of space it needs otherwise it actually takes up the entire width so by defining this as justify item center that will only take up as much area as it needs and then Center itself as well and then align items will Center this content of vertically instead of horizontally so by combining those two you can Center your stuff right inside of a div which again and CSS used to be kind of tricky you'd have to do some hacks and things to get that to work so now that's really handy to be able to use CSS grid to Center items inside of a div all right let's go down to three this one is actually pretty fun I think let me open up three of the start HTML the CSS and there's a little bit of JavaScript which we'll talk about here in a second and let's just look at the demo for three let's go to finish what this is is if you start let's make the screen bigger this way you've got items one two three four they will reorder themselves as we scroll down to small sizes or we can reorder them dynamically in JavaScript and see those reorder there by clicking the shuffle button and that is by using the order property in CSS grid so that's what we're gonna do now all right so let me make this a little bit smaller let's come over to our start CSS and first thing we want to do is just grab our grid container and do a display of grid and then a grid gap we've seen this so far already just to give some space between the elements I think they have oh we need to go to our start HTML so now we'll see them here and then the button doesn't have any styles so we can do that as well I'm actually I'm gonna just grab the button properties here and just paste them in now this button should look like our finished one all right cool all right so just by marking this as display grid and adding a good gap we've got the items in line one two three four and you can see in the HTML page here those are actually in order but they also have these classes assigned to item one two three and four so what we want to do is just try to get these to reorder themselves with CSS first and then we'll add the now the in JavaScript so let's add a media query will add a max width similar to what we did before so anything lower than 786 we will now be able to do some Styles based on those elements so what if we took our item one and we set the order to 1 for example that actually oddly enough is going to change the order you would think defining order of one would actually put it at the first position but because it's the only one that has a specified order it's then going to come last so we could do to make this come first we could do a negative one and there will come first you can kind of think of the rest of these items as having a default order of zero all right so then what we can do is just add let's just copy and paste this three times and let's grab two and three and four and let's just say order is gonna be two zero one and three what it doesn't matter you can just choose whichever ones you want and as I save this notice now that they are in a different order all right so that works pretty cool but if I go back to the bigger screen it obviously just stays at the default order that it's in so we're able to reorder content in CSS no JavaScript yet using CSS grid so now let's see how to do this in JavaScript all right so we want to get a reference to two things we want to first get a reference to our button so that thing I've got a little shortcut here to get an element by ID shuffle button is what we want to call it so that's what it's called and that's what we're going to get then we want to get each of the items so each of the items are the things in here that have a class of grid item so to do that we'll do document dot query selector if I can get that right query selector all and then we're looking for all the elements that have a class of grid item the last thing we can do in here is let's actually since we write in JavaScript let's make this even a little bit bigger since we're querying all of these elements what this returns is a node list we can convert this to an array by using the spread operator modern JavaScript syntax to spread out each - these items into its own item in an array so using the spread operator now what we'll have is an array of all of the items so we want to take our shuffle button add an event listener it's going to be a click event and on the click we want to iterate through each one of those items and then change the order of property dynamically in JavaScript so we can get all of our items and do a for each and then get each item and decide what we want to do with it so first we need to get a random number and we want a random number between 0 and 3 all right so we'll do cots random and if you've ever done random numbers and JavaScript you probably recognize this but if not it might be a little bit new but we're gonna use the random function on math that's going to return a decimal between 0 and 1 including 0 but not including 1 then we multiply that thing by 4 so we basically have a number between 0 decimal between 0 and 3 point 9 9 9 up until not including 4 and so then we floor that to get the actual integer value so this will give us a random number between 0 and 3 and then we basically just use that random number to be the order attribute of that given item so we'll call set attribute and we're going to set the style and the style using es6 template literals here so we can use variables inside of the string but we're gonna set the order to the random variable if we use the template literal syntax successfully so what this is is this is basically defining a string that will have a variable interpolated inside of it so it will actually set the order to the random number that we just set so let's come over let's click hopefully this works as we click this we get random color so dynamically we're able to tap into the order property in CSS grid and go ahead and change that with JavaScript which i think is pretty cool too sweet so let's close all of these and moving right along we'll open up number four and four is a responsive navbar which is really easy to do it's kind of fun let's look at what this does our navbar here is on mobile we'll just kind of stack the brand the responsive nav title on the list items otherwise on bigger screens it will put them out side by side this is a pretty standard pretty standard nav you've probably seen this before so let's grab not the finished versions of these but the start and the CS or start CSS and HTML and close out that javascript file and inside of the HTML notice that we've got our nav it's got one div for navin and in the nav items themselves are the nav items ul unordered list has three items inside there so let's grab our CSS and the first thing we want to do is grab the nav and do a display of grid now we're gonna have two columns in here grid template columns one is for the nav brand and one is for the actual map items so we want the nav brand to take up more space basically as much space as it can outside of the space that D map items are gonna take up so we can define one fractional unit and then auto auto is basically saying only take up as much space as you need one F RSS all right I'll grab the rest of the space so let's look at this thing if we go not to the finished example but to the start and we should see these things laid out they don't look that good the interesting thing about this well actually let's do a couple things let's add color white that'll help a little bit and then padding inside of this nav 20 pixels so that looks good we can also align notice that these things are not aligned vertically we can align those if you remember from one of our previous examples by calling a line items Center so this should at least align the content and then now we need to go in and display these horizontally one of the cool things that we can do is we can grab the nav items and we can use CSS grid for it so this is a grid embedded inside of a grid we can do a grid Auto flow column like this and what this means is as we have extra items that don't fit into columns instead of then generating more rows just add on another column in the implicit grid so we do this and now we see that these things are side by side grid is laying that out for us we could use the grid gap to give some spacing that's gonna lay it out now we just need to style these things like list items without styles actually so list style will be none and then padding in line start will be zero as well so now we see this thing laid out basically how we expect we could also style the nav brand make this a little bit bigger so font size 24 pixels and then font-weight:bold of 700 so now this looks good as a regular navbar but when you shrink notice it gets a little bit ugly that doesn't quite work it's not too bad honestly but we can easily just kind of stack these two things on top of each other by redefining our grid so let's do another media query media max width of 786 pixels all right and what we want to do is select our nav and we're just now going to redefine it's only have one column so that it automatically wraps everything else to the next column our next row Steve's me and then we will justify those things to be centered horizontally so grid template columns is 1fr and if we say that we should see that now these things are just on one line and then inside of here as well to finish this out we can justify the items not content items Center all right so there is the nav brand on top and the nav items themselves they still have their nice grid gap which works nicely all the stuff is centered horizontally and it is responsive when we get on bigger screens really cool I'd like navbars can be a little bit tricky to build but using a couple of CSS grid definitions in here it gets a lot easier to make it responsive so really cool all right so moving right along that was example four let's look at example five this is an asymmetric dashboard let's look it finished HTML this is a symmetric in the sense that some items take up two columns some take up three and as we shrink down when we get on small screens we basically just stacked them all on top of each other so let's open up the start HTML and then open it up in our code as well sorry HTML CSS in the HTML file we've basically just got a dashboard here and then we've got some grid items some of them are tagged with main some of them are secondary so the main elements are going to take up three columns and the secondary are only going to take up two all right so that's what we're gonna work with let's open up the start CSS and we will start by selecting our dashboard as you can probably expect we'll label this as display grid we'll say grid template columns and we want to have actually six actual columns and the reason is if we want some of them to take up 3 and some of them to take up 2 but we still want to fill the available space we need to have 6 total columns and that way we can fit in a three and a three and then two two and two so instead of writing out one fr6 times you can actually call the repeat repeat function and pass it one FRR actually excuse me six times you want to repeat one fr so so we'll give us the six columns and if we do that we now should see these are listed in six columns there's nothing in the sixth one because we only have five items cool we can also add the grid gap this is getting to be a pretty standard with us as well of 20 pixels and we see those are spread out now let's try to take these and I'll line them the way that we want so inside of the CSS let's grab the main and we want to define and how many columns a main element should take so grid column instead of specifying a specific column we just want to say span three different columns so this should go ahead and take care of laying out two of them side by side each of which are taking three columns and then these secondary ones we only want to take two columns so we'll do the same type of thing we can actually copy and paste this and we'll do this as secondary and span two instead of three cool so this is not responsive yet but this is asymmetric where if you have anything that's asymmetric you probably want to figure out how many different columns you need total if you think about taking up half or if you have two by two and then three by three you need six total columns to be able to make all those fit so the last thing to do is make this responsive and our typical media query again max width of 786 pixels in a while not that we will select the dashboard and what just to find our grid template columns again as 1fr and they should all stack on top of each other so if we shrink this down to 786 we see they go shrink all the way down except for there's a little bit of a gap here and the reason is if we hover over this we graph we hover over see if I can get on to the dashboard here it's actually Chrome is showing us those gridlines and notice that the ones that are meant to take up three columns the main ones on the top are taking up three columns while the secondary ones are only taking up two so grid because we define that many more columns is forcing it to create those extra columns and so to fix this we can grab any element inside of our dashboard so this star is any element inside of the dashboard and just tell it to have a grid column span of one so that now they will all act the same and only take up one column so we get this responsive asymmetric dashboard which is good stuff as well all right so let's look at example six this is a asymmetric gallery layout so let's look at the finished HTML here this one was a lot of fun for me I was actually working with my nephew and he wanted to go with a New York City theme and so what this is is when we come out a little bit bigger we can see we've got kind of a primary picture and then some ones that go around the edges of it as well and then when we go into responsive mode they kind of stack on top of each other with this one's still being bigger these two only taking up one column of two alright let's this is probably going to need to be a little bit bigger to start let's grab the start HTML and without CSS this thing looks pretty terrible so we'll go in and style it let's close out all these extra files we'll grab or start CSS and start HTML and inside of our HTML we have a grid container then we have a gallery image inside of the grid container inside of that div it has the actual image itself as well as an overlay and we'll show how to get those overlay effects when we hover so we have several different of those the top one is labeled as featured which means that we want it to take up more space and the bottom ones are just regular gallery items cool so let's start with our grid container you've seen this a couple of times now display grid grid gap 20 pixels and our grid gap and then we'll need to define our columns so grid template columns and we'll repeat 3/4 1fr so this will put them kind of three side-by-side but we haven't styled our images so actually just taking up as much space as they want we'll fix this in a second and then we'll do our first time defining rows and we want to have three rows here as well and this will be three rows of 160 pixels so we doesn't look exactly like we want so we need to go in and style those images as well so let's grab each of the images and let's set the height to be 100% that way it will only take up the hundred and sixty pixels and then the width will be 100% as well and then to make this look as best as possible we'll set the object fit to percent so now if we look this is pretty close to what our layout is except we want our let's see our let's see where the style our featured image to take up a little bit more space so let's grab featured and let's say the grid Row is going to be one and then we want it to span two rows so one and then span two and then the same thing for the column we want us to start at column 1 and then span 2 as well so let's look that should take care of the basic layout it's not responsive yet so we'll do that here in a second but we've got the layout here to make these kind of fit around it so what happens is it finds this featured image that featured image comes first in the list so it would take this top left corner because it is defined to take up more space it takes up its necessary space and then the other ones just kind of fill in the gaps around it so it actually works really nicely so to make this responsive let's do our media query say max width 786 pixels let's grab our grid container again and inside of here we'll define our columns and in this case we want to have one fr one fr only two columns and then our grid template rows will be 300 pixels high alright so each row will be 300 pixels high are we triggering that there we go all right and looks like we're a little bit off here on the featured one so we'll talk about that in a second and for any additional row that's create created we want it to have 160 pixels so we're only defining one row which is 300 pixels high and then the rest of the rows the ones that are automatically created we want to have 160 pixels so if we look at this now we still see our featured image is the biggest and then these have a limited amount of height and then take up two widths as well so that works pretty well if we come over this way and then shrink down that one still sits on top these just kind of fill in on the bottom all right so that works really well now let's talk about this hover effect and this is going to be kind of cool I think we're let's start with just our overlay so we've got that overlay inside of the gallery image and just to show you that it is this thing is anchor tags we can click on it in theory and our overlay will be several things but it will be position:absolute and we want this to take up the entire width and height of that image so we'll set I hate typing these out so I'm going to copy and paste this will set the top left right and bottom all to zero and unfortunately that's gonna have it take up the entire screen the reason is our image needs to be set to position of relative so let's target our gallery gallery image and we'll do two things set the position to relative and the overflow to hidden we'll talk about the overflow here in a second so now what this should do is put our overlay to take up the entire width and height of the image that it's on so you can see that is working but it doesn't look that good so we'll add a few more styles to it we want this to be basically a transparent background or black background color so we'll do our G be a and we'll set it to 0 0 0 and then 0.5 as the Alpha that we'll add as you can see the dark color on top will set the color to white all right so now the link should be white and then to Center that content we've done this before we can actually make this a display grid and then a line items Center and justify I justify items Center as well all right so that should Center that link that looks pretty good we can bump up the font size font size 18 pixels for example make it a little bit bigger and that's getting pretty close now what we want to do is we want actually want to slide this thing off of off of the image so that we can't see it so let's transform and translate why and just translate it negative 100% what that's going to do is put it that work transform translate negative - parentheses here just one what that's going to do is take that overlay and just put it all the way up above the card if we didn't hide the overflow this would get really ugly right you see how the Ninja Turtles one is up here the One World Trade is up here the reason we're hiding the overflow stuff is so that we can push this thing off above the card and then slide it down and not see it while it's hidden so as we have this transition we will transition over 0.2 seconds when we transform so the way we do that is we target our gallery image gallery image and in the hover state for it and then we want to apply something to the overlay itself and what we'll do is we'll just transform and translate Y back to zero so this is basically gonna translate this transform it back to zero so if we hover we get the slide effect in for the picture we've got our cool responsive gallery and we're able to use CSS grid for the overlay to add this centering of the text and you could go and customize this any way that you want but I think this is a really really cool demo of a couple of uses of CSS grid can be combined with just some cool CSS stuff as well so let's go into number seven here is a responsive card gallery and this one is fun because I have done this in a couple of videos at least kind of the logic behind it but we'll still talk about it here finish HTML this is a responsive card gallery for Harry Potter characters and if we go and shrink down these things kind of shrink down in columns and they happen all automatically the tricky thing with some cards and in this case this situation we don't know how many cards we're going to have so we need to make them all fit well on the screen regardless so let's open up the responsive card gallery the start HTML let's open up that file over here and the difference is start CSS HTML and JavaScript let's look at the HTML there's basically nothing in there because we need to dynamically go and get Harry Harry Potter character information from an API let's start with just populating this unordered list of characters so what we're gonna do is get a reference to the characters list by document get element by ID and it is called characters list let's maximize this and we'll create a function called load characters which will be an async function and if any of this JavaScript logic is tricky for you I have a video that you can go and reference where we actually built this out from scratch so I can spend more time on it there and I'm gonna copy in this one request that'll format there we go and what's wrong with our formatting here we need to add a catch and catch is going to be console error --air alright so what we're doing is we're making a fetch request to this API this API will return us a list of Harry Potter character so that's the data that we get back and with those characters we want to take this response and actually convert it to that JSON response and so we'll say Const HP characters equals oh wait res JSON so with the fetch API we will await what it returns we'll get that response and then we'll convert that thing to get the JSON body out of it and then have it be here as the Harry Potter characters then we will call display characters by passing in the Harry Potter characters as you might expect so then we need to define this function so let's define the display character sconce display characters equals and it's gonna take in a parameter of characters and inside of here what we want to do I'm just gonna copy and paste this line in again you've got you've got a full video that you can check out if you need extra context for this but I don't think it's the most important to write out right now basically what we're doing is we're taking each one of these characters and we're generating an HTML string to represent that character that HTML element will have it's a list item with a class of card inside of it it will have a card image as well as card details and then it will display that to the screen by setting the inner HTML of the UL the characters list to that string again don't worry about this JavaScript too much you can go and watch that video for reference main focus is gonna be the CSS but we've just got some stuff here to set it up and so to start this off we want to actually call the load character's function when the JavaScript is loaded so what this becomes is hopefully now let's see it looks like we have an air inner HTML of null maybe we don't have our characters list characters list if we get spelled correctly and now we see that all that Harry Potter information is coming back so now we need to take these and style them and as we have done in a couple of cases before we're going to use CSS grid in two ways one to lay out all the cards and then secondly inside of the card to lay out the image and the details for that card so let's go ahead and get started with that inside of the start CSS will have our gallery and it's going to be a display of grid and then we're gonna do something really fancy here grid template columns is going to be a repeat something called autofit and then a min Max 320 pixels 1fr what this means this is really fancy what this means is we want to automatically fit as many cards as we can Auto fit here on the screen column wise but we don't want a card to be less than 320 pixels and then anything above that just have it take up the available space so we'll look at this and it actually works pretty cool or if we span this out the images need to be fixed so if we drag this out we get more and more cards added as we can fit them on the screen so a couple things we might want to do let's see yeah let's go ahead and style well let's add a gap here grid gap 20 pixels and then since this is an unordered list we need to add in line start none and then list-style:none so this is just basic style getting rid of the basic styling for list items then we'll grab our card and I want to do I'm gonna copy in a few things in here so some of the boilerplate stuff here is a box shadow and a border and then also a border radius and a transition so I'll copy those in cuz that's not what we care about most now we can actually use the CSS grid stuff to style this so we'll do a display of grid and then we'll have grid template columns one fr and three fr so this means that we want the image to only take up a quarter of the available width while the text will take up three-quarters of the available text because the two children of a card is the image and then the details all right and then we'll also add a grid gap in there of twenty pixels and you start to see this is looking close to okay but our images are still taking up too much space so we will grab each of these images so card image and then the image inside of it will say height is going to be 160 pixels width will take up the available space that it has now these are starting to look a little bit better we can do the object fit to cover and just to show you this is basically stretching the image to fill the available space instead we can say hey just cover it and it will not not use it will basically kind of cover the available space and then some so it'll make sure that whatever natural ratio it has it would keep that same ratio and then shruts out to fill the entire space so it looks a lot better there there's this little gap here in some of these images that actually comes from images themselves if they're not marked as display:block we'll have that little bit of gap there and then let's see anything else so we need to add I think we're good then let's add the card title I want to get rid of some of that space below so margin bottom is zero so now these are a little bit close together but because of collapsing margit margins now the margin of the detailed here is taking over as well so let's grab the card details and let's set the margin top of it to just five pixels so now this will put these closer together but we want these things to be centered inside of the card so if you remember how we did this before we can call a line items a line items Center and now that information should be centered in the card the image is nice and positioned and then because we've got the autofit it'll put as many of these Harry Potter characters in the columns as as can fit super super cool example a lot of fun a little bit of JavaScript there but you've got some extra resources to check out if you need to all right now let's get into a responsive to column width footer design and this is a pretty standard one so you see something like this and then you scroll down and they all basically just stack on top of each other we're gonna build this one two different ways and we'll talk about what that means in a second so let's open up the begin page for this one start columns and start so notice doesn't look that great there let's open up those starter files the start CSS and HTML and inside of the HTML you can see we've got a grid container we've got a header we've got a sidebar we've got a main content and then we've got the footer down at the bottom so let's go into our CSS grab the grid container display of grid on that to start and then a grid gap of 20 pixels and let's just see what this looks like well this will put them all on top of each other which is what we want on the small design so on like mobile mobile design we want them to stack and we're actually going to start with that as being the default so so far we define our defaults to be the way it should look on a desktop version and then overridden it for mobile and media queries we're going to do the opposite we're gonna do mobile first development where that's all the definition we're gonna have for our grid on mobile and then we'll overwrite that with a media query and instead of max width this is going to be men 786 pixels so these styles are going to be applied when the screen is greater than 786 pixels and in that case we'll do our grid container will say it needs to have grid template columns it's going to have three equally width columns so repeat of 3 1 fr and as we make this bigger this means they're all gonna go see if we did something if we did it right there if we can spell repeat and not repair if that was the thing so notice this is gonna stack them all side by side now we need to determine which of these elements take up what amount of space so let's start with the header and we want it to take up the entire row so it needs to span three columns so we'll say grid column span 3 and you see that'll knock down the rest and then the sidebar will only take up one so that kind of works by default and then the main we want to take up a two column so we want it to take up the rest of them so let's grab our main and let's do grid column and this will be a span of two and so now we get the sidebar on the main content working there and then I'm gonna copy and paste this header because the footer is going to do the same thing where we will have it take up all of this space down there so we will reverse the idea that we designed for mobile first which is just stacking them and then we override with details of how to do it on desktop so if you here mobile first that's what we're talking about here where you define your Styles first for a mobile and then a write for desktop cool so in this next one I don't need to bring up the final version because we're actually going to do the same thing just in a slightly different way so number nine here let's bring up start CSS and HTML let's open up the number nine and this is going to use something called grid areas which allow us to reposition things really kind of in a cool way so let's open up the start HTML and we will start off similarly by grabbing our grid container display grid grid gap 20 pixels grid now this is the new part grid template areas all right and this is gonna look weird we've got a header and then we've got a sidebar and then we've got the main and then we've got the footer so what we're doing here and this is gonna format it for me we're defining areas in our grid and this is basically the definition of just stacking stuff on top of each other but we've given a name to each position so header sidebar main and footer and then for each of our elements header for example if we start here header is going to have the grid area of header and main will have the grid area of main and you can probably see where this is going grid area for footer is going to be footer and then the sidebar will have a grid area of side bar now you probably notice nothing in here looks different that's because again we're mobile first so we define our different areas which is just stacked horizontally on each other with only one column we'll see how we change that in a second now in our media query we can change this let's do a media and say Amen width of 786 pixels what we want to do is now grab our grid container and redefine the grid template areas and you'll see how powerful this becomes by just assigning something to an area and then redefining it so I'm gonna go ahead and put it on this bigger bigger one so you'll see a change and now we want a grid template areas and we'll start with header header header and if you're wondering while we're why we are repeating this what this means is the header will take up all three of these columns all right so that's on the first row the second row will be sidebar and then sidebar and then main main so sidebar we'll take one column main we'll take two and then the bottom will be footer footer footer and now just by saving this file by redefining the grid template areas everything just kind of jumps to place and then on the mobile takes advantage of just stacking on top of each other so grid template areas is a really really neat and powerful way to define areas for your grid in just basically like the language that you're used to then assign your different elements to those areas and then you can redefine your grid Simplot areas how you need so I think that one is really really cool so last example in here is example 10 which is a checkered board layout which I enjoy as well so this is a checker board is kind of this like two-by-twos that layout on top of each other and then when they scroll down we want them to stack on top of each other but notice the chalant one of the challenges here is the order of these the image comes first in this one but it comes second in this one but using grid order when we scale down we can make sure that the image comes first for each of them so that's going to be something we have to keep in mind so let's grab our start HTML let's close out all of our open windows let's open those two files and here alright so we've got inside of here we've got a row for each of these checker board items and it's got an an image tag in it and then a row details for each one with a title and a paragraph tag so that's what we're going to be working with we want to start with our dot row we want to mark it as display grid as you might expect we will have two columns the grid template columns and this will be one fr and one frm and so this will put them side-by-side the image is still going to bleed over us we need to fix that and then let's set the color of white to make sure that that text stands out so now I see the text here doesn't look right because our images need to conform to the space that they have so let's grab the row image set the width width to 104 percent and now we're starting to see this I look a little bit better but we need some height so let's set the height of these to 400 pixels now we're getting really close the image is look a little bit off now we can use our object fit to cover as well so now we see we've got our checkerboard layout which looks pretty good now we need to make it responsive we can also add for the details row details we can add some padding to make give that a little bit of breathing room and we've got the general layout here and so now we'll come in to our media query we'll do a media query max width of 786 pixels we'll grab our not grid area but row and then reset the column so grid template columns to just 1fr so this is basically one a stack everything on top of each other but the problem is when we do this when it shrinks down we see the image comes in in the text and in the second one because of the order the text comes and then the image so if you remember back to how we changed orders dynamically in CSS and JavaScript and one of the earlier examples we can set the row property for the row image and just set the grid row to negative one this means it's always going to in mobile inside of this these Styles it's always going to come first so I'll select that and then scroll to the top and just to show again the responsiveness here's the checkerboard and then come down and now the order switches where the image is always first which i think is really cool and a lot of fun so in recap I spent the last week really looking into CSS grid it was new for me I did I really wanted to challenge myself to play around with it and I created these examples I hope that you enjoyed them I hope that you got something out of them so question of the day are you using CSS grid how long have you been using it what's your favorite feature of grid and you have anything that you can share that is a really cool demo of CSS grid but that's gonna wrap it up for this video as always if you enjoyed the video like the video subscribe to the channel turn on the notification bill so you can get notified as the most recent content comes out but in the meantime I will see you in the next video

Channel: James Q Quick

Views: 3,482

Keywords: css grid, getting started with css grid, css grid for beginners, css grid examples, css grid tutorial, learn css grid, what is css grid, css responsive grid, responsive web design, responsive grid, css grid vs flexbox, css grid template areas, how to use css grid, web design, web development, javascript, frontend developer, html tutorial, css, html, crash course, css tutorial, learn html, learn css, css flexbox, programming, html5, css3, css course, frontend development

Id: wfXz8rW_fUs

Length: 48min 40sec (2920 seconds)

Published: Tue Mar 17 2020