CSS Grid Course: Learn the Basics in 3 Minutes

Key Takeaways

heyyyyy in this screencast you're going to learn how to create grids through defining its rows and columns a grid consists of two main elements there's the container which we have here and then there's the items which are the elements inside the container in our case six lives which display the numbers from 1 to 6 now without any grid layout this results in 6 divs stacked on top of each other I've also given them a little bit of styling but that is nothing to do with the grid layout itself to turn this container into a grid we're going to target it and give it display um grid run the code that won't result in any layout change yet because we haven't defined how we want our grid to look like so by default it only has one column and thereby it looks like we've just stacked six divs on top of each other in order to specify the columns will give the container a grid template columns will define how many columns and how wide we want them to be let's set the first one to a hundred pixels the second one through Auto and the third one 200 pixels as well auto in this case means that the column will take up whatever remaining space there is in the width let's also give the grid a couple of rows template grows and let's give both of them a height of 50 pixels so in the grid template columns property you define the width of the columns and in the grid template rows you define the height of the rows and as you can see we have a nice little grid hair as expected it contains three columns going from top to bottom one two three and two rows going from left to right one two since the second column here is set to auto this grid is also responsive in order to make the grid look a little bit nicer I want to give it a grid gas property and set it to 3 pixels as you can see that gives nice little gap between the items now let's say we don't want our grids to be three columns wide and true rows long but rather two columns wide and three long then we simply need to remove a column we can remove this last one here for example and add a row 200 pixels down here we run the code you can see that we have a completely different grid 2 columns 1 2 and 3 rows 1 2 3 the queue first rows are 50 pixels tall however the third one is 200 pixels and the grid is still responsive as the second column is set to auto so in the next screencast I'm going to show you a few more ways of setting these values inside the template columns and grid template rows but before we jump on to do that I would recommend you to jump into the cold hair and play around with the values so that you're 100% sure that you understand the relation between what's going on here in the CSS and how that plays out in the simulator over here so go ahead and do that and I'll see you in the next screencast