CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)

I've been playing around with various frameworks for at least the past eight years all these frameworks foundation bootstrap blueprint they've only really existed at least for me to disguise the fact that CSS layout until now has been pretty much a hack float or floats were the best thing we had at the time but they weren't designed for full page layout they were designed for this floating an image next to some text and that's pretty much all they were meant to do so because of this faking a grid with floats requires careful calculations setting margins lots of debugging in different browsers and it results in pages that easily break when the content changes or when the content isn't what the designer originally or developer expected and the frameworks that we've many of us have probably been using hid away a lot of this complexity a few years ago it seemed like flexbox was going to change all this and in some ways it did now suddenly we could put elements side by side make them equal height without resorting to hard-coded Heights or JavaScript so that was nice we could also easily do this without any trickery or JavaScript we could even wrap things on multiple rows but using flexbox to build a grid in two dimensions is also a hack so then those frameworks we were using just transition to flexbox we had CSS frameworks with flexbox foundation moved to flexbox bootstrap I believe also moved to using flexbox so that they were better frameworks because of flexbox but it was still a hack so how is CSS grid different CSS grid had just appeared in the past year and it's been implemented at an astonishing speed i CSS grid as a topic is far too large for me to go through I can't go through all of it but I'm going to go through the basics and then a few examples and then talk about what that means in my opinion for the future so let's have a look at a simple example using the traditional 12 column grid we've all been using we've got three elements we want to place on the grid four columns each now using flexbox we'd do something like this this is an example from the foundation framework but it could could be from any framework really we're setting display flex on the parent element grid X in in this example then we are setting some padding's on the individual cells and then we've set a width so if you look at the view bottom rows there we're setting the width to 33 point 33 percent and then subtracting the the padding's now let's do the same thing with grid now we're setting display grid on the parent item okay that's not that much different from flexbox but the big difference is that now we've defined that we're defining the grid itself so if you look at the the class grid in in this bits of CSS we've got a new property there grid template columns which has odd value repeat 12 1fr we'll go into what that is in the next slides and then we are setting a grid gap and then right at the bottom we are setting the small for class which is really just I wanted to use the same markup as as in the foundation example we're setting that to span four columns but the big difference is that now we're not calculating any width we're just saying I want this to be four columns wide so let's look at how to define a grid in more detail grid template columns and its counterpart grid template rows allow you to define arbitrary tracks tracks is a track is a generic term for column or row by the way so here we're creating a 200 pixel wide column and another 800 pixel wide column and these are obviously fixed width columns now this example changes the second column to flexible width CSS grid introduces a new fr unit which means fraction of the available space so in this case the grid algorithm in the browser reserves 200 pixels for the first column and then it looks at the remaining space and says ok it says one fraction and that's we've only got one column left so we're going to give all that rest of all the space that's left to to the second column and the cool thing about the fraction unit is that we can just add a second column like this which is also 1 fr because now we have two columns that need to split the the available space so first the browser is calculating one plus one and then dividing that into two and then splitting it up for the equally to the two columns so if I were to change the second column to two fr now it's twice the size as the than the third column now back to my original example if I want a twelve column grid I could say grid template columns one F R 1 F R 1 F R and so on but there's a really handy repeat notation to do that in much shorter amount of code now in this example I don't I'm only repeating one column but I also could be repeating a pattern of columns so I could have repeat 12 1 fr 50 pixels for example and then you have every other column would be one fraction of what was all available and then every other column would be a fixed fixed 50 pixels and like I said it has a counterpart grid template rose which works exactly the same so here I'm creating a 200 pixel header row and then the rest is allocated to whatever the content needs as a minimum there's also a max content keyword and there's loads more of these keywords in CSS grid and I haven't got time to go through all of them unfortunately but it means we get a lot of flexibility in defining rows and columns now we also don't need to set margins or padding's to fake gutters anymore because CSS grid has its own property for this grid gap it's a shorthand property for grid row gap and grid column gap which means you can define them separately if you want want to have a different gutter width between the C of the grid tracks for columns and rows in the first one there is 4 rows and the second one is 4 columns in the spec the this has already been changed to GAAP which hopefully means that we might get this in flexbox later on but that hasn't happened yet but you should still use grid gap because current browsers still don't support the short notation and browsers will probably be supporting the supporting the old version for a long time so to recap to defy to create a grid we say display grid then we define our tracks with grid template columns or grid template rows or both and then if we want to we can define a gap with grid gap now okay what we've done so far is nothing we couldn't do with flexbox or floats it's more robust but we could still do it with old techniques but what about this with Flex box or display float we'd probably have to create more wrapper containers and maybe do some height calculations with JavaScript or then set fixed Heights and hope that the content doesn't break the layout with grid all we need to do is this at the bottom there I've set them given the first cell a class big one and said grid row span too so I want this element to span two rows and that's it and now it magically takes up the height of those two roads regardless of the content in those other rows and at the top I've also defined grid auto rows to 200 pixels a grid Auto rows and grid Auto columns is another CSS grid property that allows you to say if if we need to create additional rows or columns that weren't defined in my original definition they should be this size because it's possible for the grid to overflow if we it might be that we've defined only one row but then we set an element to span two rows so the Browse house to know what to do so this case it looks okay we want those rows to be 200 pixels that could be anything it could be 10 a.m. or it could be min content or something else there are many ways to define a grid and to place things on a grid there's line based notation named lines grid template areas defining using named lines and referencing by area and there's also auto placement which we were using in our first example now the most basic form is line based so here I've got four items placed on to a grid and let's look at item number to sell to in more detail so you can see from the image that I want that to go from line number seven to line number 13 and by the way obviously this is a 12 column grid but that that means you have 13 lines so we're not talking about the tracks themselves we're talking about the lines in between so to place an item into a specific place on the grid we could say we want this to start from line number 7 grid columns start 7 and we want it to span and up to line number 13 so I say grid column end 13 and there's also a handy short notation for that grid column and grid row respectively and this is the full code for that previous example now like I said line numbers are the most basic way of laying items on a grid but they can be a bit cumbersome and hard to maintain if you ever make changes to your grid so named lines are a bit more handy such as here I want the content in the middle column and then I want one item to span the full which of width of the page so we continue as in our previous example but now I've added names for the lines in between my track definitions so I use angle brackets in between the tracks to give names for my lines and they can be anything I want and you can have multiple names per line for various purposes so it's you can think of them like CSS classes but defined in CSS itself so then placing items onto the grid works exactly the same as with using line numbers but you use the names instead and it's more flexible because then if you go and add a line somewhere you don't have to change the numbers again but what's really cool is named areas so I can also do this there's this handy definition for grid template areas where I draw a kind of ASCII map of our grid and let's look at that in more detail each row is delimited by quotation marks and each cell of the grid has a keyword to represent it and those can be anything I want so basically this says that I've got a logo on the left then I've got a navigation that spans two columns then I've got content that spans two columns in the second row I've got an aside which spans one column in the second row and then a footer which spans the whole of the third row and when I want to place something into an area I just say grid area logo and it goes there and that's that now why this is especially cool is when you make changes to your layout based on the size the width of the container whatever all I need to do yes this is the whole code for for placing the elements onto the grid so when I want to make responsive changes to the layout all I need to do is redefine the grid and I don't need to don't necessarily need to touch the items at all which potentially makes my code much much more simple so there's lots to know about defining grids and placing things on the grid and I recommend you read the spec to find out more so do we still need frameworks they've mostly served to hide the happiness of CSS layout until now and in my opinion as a developer who has been using frameworks mostly out of convenience I'd say that going forward they can only limit the potential of what we can do with flexbox and CSS grid and many other layout methods depending on the right use case so we'll probably we might need frameworks for for some purposes and there I can still see them as being useful for prototyping or people who maybe back-end developers who don't have a clue about CSS and just want to get something a nice user interface quickly but if you are a front-end developer or someone who thinks you should know CSS then I think you should put those frameworks behind you and and start learning CSS layout deeply now CSS grid is not going to replace all these other layout methods it's it just means that now we can use floats and multi-column layout and flexbox and also display table for what they were originally meant to do but what about old browsers browser support is actually pretty good the implementation across modern browsers is amazingly stable IE 10 and 11 however along with some old versions of edge support an older version of the spec and it's missing quite a few of the property of the new spec so it will depend on the project you're working on whether it's worth it to to also write things in that older to write code in that older spec so that would depend on the project I'd say most of the time probably not so just a quick example of doing something with CSS grid with a fallback I want to create a gallery like this and I want some of the images to span multiple columns and all rows I could start with an inline block style grid well it's not really agreed I'm just saying that I want these to be inline block and have a certain maximum width and this should work in the oldest of browsers and then I can enhance it with CSS grid by defining defining the grid and then adding a few additional styles to the elements I want to span multiple columns or rows and in this example I'm using auto placement which is the default way CSS grid works if you don't set a specific place for an item on the grid it will just go to the next cell on the grid available which is very handy for cases like this where you don't necessarily know how many items you have beforehand there are some accessibility concerns with CSS grid so as you can probably imagine because you can place elements basically anywhere you want on the grid the visual layout of your page can quickly become out of sync from the source order of your page and because CSS grid doesn't change the tabbing order of your page people using just a keyboard to navigate can quickly become confused so it's your responsibility to make sure that doesn't have there are loads of resources for reading up on CSS grid everything written by Rachel Andrew is is superb that's mostly how I learnt CSS grid myself her website grid by example is is great it's got loads of example patterns with full fallbacks for older browsers the mozilla documentation is is great I suggest you also read the spec it's I was surprised myself how easy it was to read compared to some earlier experiences on reading w3 specs Jenn Simmons has a great website with with some CSS grid experiments and Rachel Andrew just came out with a book on a book apart which is pretty short and really summarizes everything we can do today with with CSS layout it's not only about CSS grid so I'm from the Zealand family have we got time for a couple of questions thank you [Applause]

Channel: Coding Tech

Views: 106,186

Keywords: css grid, css grid layout, css frameworks, bootstrap, foundation, web design, front-end development

Id: paMmgo4MhQ8

Length: 21min 20sec (1280 seconds)

Published: Thu Dec 14 2017