CSS Grid Explained Quickly (with diagrams and code)

up until this point all our layout tools have been content out and one-dimensional meaning you apply a layout to an individual item and then you have to relate that item to other things what we need is a two-dimensional layout that works layout in and that's what CSS grid gives us CSS grid needs new terminology so we have grid container grade item grid line grid cell good track grid area grid gas so a grid container is any container in your document now you create a grid inside you do that by simply declaring display grid you can do this to as many elements as you want on the page it just in that it does not matter a grid item is any direct descendant of a grid container so if you create a grid any direct descendant automatically becomes a grid item that's placed inside the grid but only the first level descendants just like it is with flexbox a grid line is any of the lines you draw inside the grid horizontal or vertical the grid lines are numbered by default so the first edge of the grid either vertical horizontal has the line number one and then you just count them two three four five six and the last one has the last number the grid cell is any cell inside the grid a grid area is any defined rectangular area inside the grid that covers more than one cell a grid track is either a horizontal track or a vertical track so a row or a column and a great gap is the space between each of the cells if you choose to add basically gutters CSS grid in a nutshell how does this actually work how do we apply it today number one to find a grid on an element where you want a grid to appear number two place items within that grid where you want them to appear number three make world peace that's all there is to it what does it look like well here's my example this is the semantic markup with know CSS apply except for color then we start by grabbing just the site container that's the container that wraps everything and we declare display grid so now we have a grid then we decide how many columns and how many rows we want I mean you do that using grid template columns and grid template rows and here what we do is say the distance from the edge of the grid to the first line that's the first value then the distance to the next one it's the next value and so on and so on so you're declaring the width between each of the lines and then another line is drawn this comes with new features like the fr or fraction value that allows you to say take one fraction of the available space and then put a line there so you can make truly dynamic layout do the same with rows you just declare a list where you want the rows appear and they will appear automatically once you've drawn lower growth you have cells and your browser automatically places all the direct descendants of the grid element in those cells from the top left to the bottom right then for each individual element you can if you want to declare a grid column at a grid Rho property and say I want this element to appear from column line 2 to column line 4 and from row line 2 to row line 3 that means you literally find column line 2 and column line 4 and you put the content in between those two lines same with rows well I here you see what I'm talking about we're doing layout in so we create the layout first let me just dump content where we want them to appear when you look at this you realize there are all these new things you can do like for instance create actual white space on a layout you can just choose not to populate cells then you have white space no spacer gifs or anything like that anymore once you know this you can then place any of your elements anywhere you want in the grid looks promising right but you have to do all this counting stuff I keep track of the line number and what if it's responsibly to keep changing the greater gets kind of nuts in my layout I move elements particularly the header and the footer keeping track allowed but numbers would be a pain and to be fair you can't actually give each of the track lines a name and refer to them by name instead of my number but that's still quite a lot of stuff to deal with so we have this new property called grid template areas and grid template areas is nuts it's almost like a ski you declare grid template area and let me write out each of the cells and your grid and you say what is the name of this song so for instance here I have the three cells at the top our title title title and then we have main header header and main sidebar footer then you use the grid area property on individual child items and you just declare the name of the area you want that element to appear so if you say grid area header well that's wrong I should know it's right if you say grid area header the element goes to the header area if you say grid area title it goes to the title area and this allows us to do crazy responsive web design because that means instead of doing a bunch of crazy stuff all you have to do is change the grid template areas and then the items that you've already said this is going in a title area this is going in the header area we'll just move around the grid so your responsive code and your media queries become very very simple and anyone who reads this code can see okay so we have a grid that has two columns and then we put the title and title and mine and header and main and sidebar and then when the screen gets wider we have three columns and here we have title title title main header header the CSS actually visibly declares what's going on no more no more everything just works this is that point where your brain will start going like this doesn't actually compute yet and trust me I've been working with this for over a year every time I sit down and do a new grid layout my brain keeps telling me to do things the old way and I have to keep throwing my brain out and then replacing it with a new one which means my kid is walking around in the background they're making noises when he grows up he won't think the way I do and he'll be like this is super simple and then I'll tell them about flawless and clear like why would you do it like that that's so crazy

Channel: Statuscode

Views: 29,284

Rating: 4.949367 out of 5

Keywords: css, grid

Id: ojKbYz0iKQE

Length: 7min 29sec (449 seconds)

Published: Sun Jan 07 2018

Reddit Comments

[u/cmdtekvr]

Watch out the devs that still support IE10 and IE11 hate this topic

[u/rousseaux]

I find this really useful, does anyone know of anything similar in presentation for ACF for Wordpress? Like with someone talking in a human way about what it does with visual examples? Just reading the documentation isn't getting anything to sink in for me.

[u/sendmeh8mail]

Noob question, I was trying to use grid for the first time and it wasn’t working in Chrome. I had to enable experimental web platforms in chrome settings for the grid to even display at all. Is grid supported in Chrome and other popular browsers or is it still pretty new? I already know about it not working in some versions of IE.

[u/My-Work-Reddit]

Nice talk, but I have two sticking points:

1) grid lines start at 1??? Come on now ...

2) "spacer jif"??? Again, come on now ...

[u/ShaySmoith]

well i've been wanting something like this to help me git the jist of things.. much appreciated for the upload pete.

[u/MrEscobarr]

I tried using the css grid but there is still no support for IE? I used the prefixer but still wouldnt work. Can we please remove IE forever