CSS Grid Changes EVERYTHING - Amazing Presentation

I have a book in my bag and on that book I draw all sorts of layouts all the time that's how I design websites it start but a piece of paper and I just draw some stuff and I go haha this would be super cool so a couple of years ago I made this design and when you look at it you go yeah this looks like a standard web design it's fairly basic it has some interesting stuff like there's the categories and title at the top and then you have the featured image and then you have the meta content on the left hand side or right hand side right hand side and then the content itself and you go yes sure this is relatively easy to do except on smaller screens I wanted to make a slight change move the meta content from next to the content up above featured image and then on even smaller screens I want to move the featured image of above rest of the content and at this point you go this is not so easy you see any one of these three on their own is a piece of cake combined on one website with just CSS and HTML impossible because you'd have to change the mark-up structure to get this to work with old layout tools so instead you'd have to go with JavaScript and have to change everything which is not great because then you're changing everything and it shouldn't be like that today I want to talk to you about a whole new way of thinking about layouts on the web and this whole new way of thinking about layouts will truly change the way we design websites from here on forward I'm not talking about emerging technologies that are coming two or three years from now I'm talking about technologies are here today that you need to start using today it's called CSS grid I'm working on Hendrickson and let's get cracking so just to prove to you that I'm not making things up this is the layout I drew built purely in HTML and CSS and WordPress running in a browser today and all the stuff that you saw it's happening plus a bunch of other things this website you're seeing here is my website so if you go to Morton com grab the side of your browser and start doing this you'll actually see the content jumping around on the page and your brain will say there's some JavaScript happening here or this might be bootstrap it's not it's just pure simple CSS and in fact the HTML behind it is cleaner than any HTML you'll ever see from WordPress before this point so instead of going through the entire WordPress thing which will take way too long I decided to make a slightly simpler example so I made this little web page for the room we're in so this is the speaker track for today and when you look at it I want you to think about how you would make this layout using only HTML and CSS no frameworks nothing else just look at it for one second I think how would I mark this up all right it's here so first you're probably going to do something like draw boxes around the main item so here we have some sort of header saying and then there's a huge section on the side but all the content and then on the other side there's like a logo and then there's some other sidebar stuff good so we have those boxes and we'll mark that up in HTML then because we have to lay this out we need to start grouping elements so below the main header saying there's a bunch of content but the content is displayed in two columns so we need to put a box around them so we can float them left to right or you select to put them left and right then in the sidebar we have another grouping of contents and since we're floating that we need to put a box around that and then inside the cyber itself there's two more pieces of content the need box to surround them so we end up with something like this the blue sections are semantic markup things that are required for the document to work this is the actual content the red sections are boxes that we drew around content solely to say this is a thing that will go next to another saying and this is another thing that will go next to another thing and you see that the markup is full of that stuff when you start looking at responsive layout that gets super complicated because in this responsive layout you see that that's saying the black box that's on the sidebar that's actually the header and this the small box on the far right-hand side that has some address information that's actually the footer and on a mobile display the semantic structure is as it should be on the other end of the scale everything has been moved around and then you say I can do this bootstrap is my friend everything is fine the problem is what bootstrap does to fix this and all the other frameworks is take the HTML and apply some JavaScript and move the HTML around in the document to get this stuff to work that means for accessibility reasons the whole document is now jumbled which is not great it also means we're leaning on external technologies to do something that should work on its own the problem is web layouts the way we've been doing it since the beginning of web time have always been broken and all we've been doing this entire time is refine how we break the layout so we start with tables then we had frames then we had layers then we had slopes and clears then we had flexbox and all this stuff is trying to solve this fundamental problem which is a web document so hTML is a document that starts at the top and ends at the bottom and anytime you want to put something next to something else you have to somehow break the document just to do that which goes against everything we want to do in design consider this super simple example you have a box and then two boxes inside two column layout simple right should be well if you look at just the markup this is what you get just two boxes below each other with a box around them then you have to put them next to one another so you use float few floats one item to the left and the other one item to the right and then the box that surrounds the collapses of course you're floating content so you're pulling them out of the structure of the document and then you want content to float around it to fix that you then have to introduce a clear fix so that's just empty content that you stuff on the bottom corner solely for the purpose of making that box wrap around those contents again and then you say well we have better tools now we have flex box and it's true flex box does solve this problem but if I make it just one element more complicated flex flex doesn't help us any more because now we can't say to flex put the content through other pieces next to another than one piece not flex box would try to treat all three as the same thing because flex box works in one direction either horizontal or vertical so now we have to introduce an extra box and say can you please flex this container thing next to the other thing and then inside the container we'll put two things underneath one another this is the hack this is not the way it supposed to be this is truly a hack this is how we design websites today we cheat we build a bunch of extra stuff just to get our layouts to work it's nuts if you think about it it's totally crazy slowed and flex forced us to put extra content into our HTML for the sole purpose of layouts which goes against everything we've learned about how to markup websites this is also layouts today this is how we have to do things well it is today that you're going to change all this just before I get into it consider what the web looks like right now this is bootstrap the official documentation telling you how to make a layout that has two columns look at the HTML look how many nested divs are necessary to get this to work this is a wordpress theme builder plus a some sort of page layouts plugin I can tell you by looking at this HTML all of this stuff generates a box with some content in it but it's necessary because we have to do all this floating and clearing and nesting and nesting and nesting and nesting underscores this the same in this slightly less extreme version when you look at the overall markup of underscores there's a bunch of elements within underscores that are there solely for the purpose of layout so the blue boxes here are the header the main the aside and the footer the red boxes are there for layout purposes so whatever we could take all that extra craft away have just the semantic markup and nothing else and then solve the layout problems in CSS in a clean and simple way instead of this layout we have this which is easier to read makes way more sense what if we didn't have to do all this crazy stuff anymore if you look at my example the blue items are the ones that matter the red don't but even if I take away the red items the structure of this document still makes no sense we have a heading 1 then we have a main then we have a header then we have an aside and then we have a footer if I take all the extra craft away and reorganize the document all of a sudden it makes much more sense from a semantic standpoint header h1 main beside footer the problem is 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 so instead of doing all the boxing thing I was talking about before what if we start by saying here's what we want let's apply a grid to it just like you would do in design draw great on top and then you say we're going to place contents on this grid do you have your semantic markup then you simply grab each item the header the h1 the main the sidebar and the footer and you place them on the document that makes sense all of a sudden you don't last thing with the guy with the blinds that everyone shares on the internet all the time that's it'll be like old applies work too bad this works perfectly go to code pen this example is a live website although screen grabs are from the website all the content restructures the way suppose to you can play around with it you can see exactly what's going on and the craziest part is when you read the code you'll be like I understand what's happening here I don't even need to understand CSS grid I can actually see how this works so others are working I've been told that listening to my talks to be a bit like trying to capture a firehose sometimes so I've decided to try to structure this in such a way that it's more like strapping fire hoses on a platform and then flying all right but ever but this means I need your absolute attention I'm going to crash through some stuff here it'll be nice and quick ok so brace yourself stand firm CSS grid needs new terminology so we have grid container grade item grid line grid cell good track grid area grid gap I apologize I know you have to do this but it's the simultaneous translator or does not appreciate these 55 so a grid container is any container in your document that 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 doesn't out 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 descendant 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 1 and then you just count them 2 3 4 5 6 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 got that good don't worry these slides are online you can go look at them later and this will become part of your vocabulary anyway so CSS grid in a nutshell how does this actually work how do we apply it today number one define a grid on an element where you want agreed 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 let me 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 rose you just declare a list where you want the rose 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 and a grid row 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 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 space or gifs or anything like that anymore I want you to 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 numbers and then what if it's response we're going to keep changing the greater it gets kind of nuts in my layout I move elements particularly the header and the footer keeping track alive with numbers would be a pain and to be fair you can 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 a grid template area is nuts it's almost like a ski you declare grid template area and then you write out each of the cells in your grid and you say what is the name of this cell 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 that'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 item so you've already said this is going in the 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 minun header and main a 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 what is happening this is business 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 the background layer 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 flows and clearly we go like why would you do it like that that's so crazy there's also this weird little thing called nested grids now in the original grid specification from a couple of years ago you have the ability to create a grid and then have an element within the grid inherit the grid so you would get consistency that never happened in browsers so instead what we do is we declare multiple grids inside one another and it turns out that's actually a huge benefit because then you can say I have an overall layout grid right layout my header my footer my sidebar and so on then you can have a sub grid just for the main content layout and you can even have a grid inside that grid for something else and you have detailed control over every single component within your layout and as you know the new trend in web design is to work on component level well let's the grids allow you to literally work on component level and this means for example if you're making a WordPress theme you can make individual content grids for individual types of content so if you apply a certain class to any elements then you can change the grid completely using pure CSS no more fancy templates and crazy PHP just use CSS but older browsers this is the absolute biggest argument against CSS grid first of all all modern browsers support CSS grid now every single one of them there's an issue but I'll get to that in a second before we get to that there's also the question of I think it's too soon this is emerging technology it's not mature yet true it's emerging technology but you know small websites like the New York Times have them started using them so I'd say any client that says we're not ready for this yet because no one is using it it can be urged forward this is something we can do today but there are two elephants in the room right do you how these see you give me way too much credit they're always these things that don't work the way we want to so we have Internet Explorer 10 and 11 and we have edge who are not currently following the spec exactly point of order if it wasn't for Internet Explorer 10 we wouldn't have CSS grid CSS grid was invented for Internet Explorer 10 and the reason why these two browsers are lagging behind is because the other browsers decided to change the spec but the spec is built into Windows so Microsoft has to update all of their operating systems to get this to catch on however edge is probably a couple of weeks away from getting full grid support and I'll show you how to create proper backwards compatibility for all other browsers there's this other thing that has nothing they would CSS grid that's called a feature query that we can use now to ask the browser do you support this grid problem with this CSS property and we can use that to test whether or not the browser support grid the canonical best practice is to ask app supports display grid works exactly like a media query so if it says yes and we run the code inside the problem is edge does support grid it is to sports the wrong spec so if you're testing for grid support and edge test for something that edge does not support within the grid spec for example grid area auto then edge won't try to run the grid my recommendation here is actually to serve up the mobile experience on all browsers that don't support grid and this is where people fall off the horse right this is like wait wait wait wait wait what so that means the site will look the same in all browsers that's exactly right the thing is we've been doing responsive web design for 10 years now no we have not we've been doing responsive web design since 2010 and that we've established an entire language around not serving up the same experience across all browsers because on a mobile browser the website looks totally different from what it does on a large desktop browser there is no actual reason why a website should look the same across all browsers except that we keep saying they should so we can change our methodology around this making everything look the same across all browsers is a bad habit we should be making things look the best they can on whatever browsers are supported in responsive web design allows us to do this we just need to migrate it from not just saying responsive web design it's about the width of the screen to also say we can make it responsive to the age of the browser accessible mobile first layout work well on all browsers if you don't believe me go look at the mobile version of Wikipedia on your desktop browser you will never use regular Wikipedia again the mobile version on the desktop browser is so much better I don't understand why they just don't move forward this is progressive enhancement this is our responsibility we progressively enhance the web because if we don't then we'll get stuck in the past forever so practical approach to CSS grid right now so you can use it when you walk out of this room first build accessible mobile first layouts without grid that is your baseline so make it work on a mobile phone make it sure that it still works when it's on a wide screen then use that mobile first layout as the fallback so if everything goes to hell mobile first works then use add support to the text grid support at the appropriate breakpoint when everything starts looking weird add a grid then keep scaling up the width of the screen add another grid at another grid on another grid because people have screens that are this wide right now so you need to account for that so don't believe me go to my brother's house he has this ridiculously huge screen so remember the layout I drew that was impossible see you apply grid to it it's not only impossible it's something that makes sense and just works and it's the layout that's then the new theme on my website and you can go check it out on github and put it on your own site as well your path to CSS grid starts here today right now number one use Firefox when you develop because Firefox has a grid inspector so anytime you find an element that has grid on it there's a little hashtag type thing that's supposed to look like a grid and if you click on that and the inspector the gridlines appear in your browser you can actually see the grid while you're working with it I'm sure the other browsers will catch up but right now Firefox has it second Rachel andrew has a website called grid by example this is basically doctoring rachel andrew is by and large the reason why we have CSS grid and browsers today she's been pushing it for years and years and years and she's documented absolutely everything so you want to know how it works go to grid by example Mozilla developer Network has tons of documentation most of it written by either Rachel Andrew or Jenn Simmons it is a great resource it's documented every single property and everything that's going on CSS tricks has a complete guide to CSS grid which is just like the complete guide to flexbox which is also the same content over again Miami scene which is running on my web site is on github and you can go check it out pick it apart send pull requests complain about the lack of internationalization what you'll notice is CSS grid respect text direction so there is no RTL see a style sheet because wood CSS grid you don't need it anymore I wrote an article about this that came out in Smashing Magazine yesterday called the building production-ready CSS quit layout today that covers what I talked about here plus how I designed the scene plus a bunch of other stuff go read it go where you want to go where you want the web to go and the rest will follow we in this room control a large percentage of the web and if wheel adopts CSS quit now and do it properly the web will follow don't believe me this is the LinkedIn office in Carpinteria that I go through occasionally they built a new building and now they put this huge patch of grass directly in front of the entrance so if you look at the image here there's a building here so everyone walks like this and I sold a patch of grass so this is taken on the first day and I'm like this is insane whoever designed this was not thinking about the end user so I just started walking across the grass and I was walking across the grass for a couple hours to make a pass and then a couple of months later someone sent me this picture and then their code a week ago someone sent me this picture if you paved cow paths meaning walk where you want everything's ahead eventually someone put paving stones down so designers in the room CSS grid means you can finally use proper grid systems in your design there also means design the browser is now really easy same developers start using CSS grid today in all your work even if it means providing full fallback for everything you do I have links for that if you want to talk to me later framework people CSS grid cures your dividers so you should take a strong inoculation right now page builders this is make or break time CSS grid plus Guttenberg and WordPress means that most of what page builders does will be handled inside WordPress itself so if you're building a page builder you need to get on top of the spec and figure out how it fits into your our business model set best practices be responsible because CSS grid allows you to mess around with the structure order of your content and can make sites really inaccessible so don't do that but use it for good build the web you want to see and repeat after me make it accessible make it fancy and make sure the fancy doesn't break accessibility oh come on stand up everyone of you stand up come on everyone of you stand up this is your mantra all right number one what number two number three thank you very much [Applause]

Channel: Coding Tech

Views: 1,050,376

Rating: 4.9386563 out of 5

Keywords: css, css grid, css grid layout, css grid tutorial, css grid layout tutorial, css grid 2017, css grid layout 2017, css grid nested, html5, front-end, web design, web development, css4, javascript, webassembly, coding tech

Id: 7kVeCqQCxlk

Length: 32min 6sec (1926 seconds)

Published: Sun Jul 16 2017

Reddit Comments

[u/herjin]

For those interested in learning why this is not a table layout with a fancy name I'd recommend checking out http://cssgridgarden.com/

[u/parion]

Great talk about CSS Grid, it just annoyed me how many times they cut to only the speaker, considering this was a very visual-heavy presentation.

I suggest doing what I did, if you can, and watch the talk while looking at the slides.

[u/kekeagain]

This is so easy I won't be needed anymore!

[u/stev0205]

I'm really excited for CSS grid. It seems to solve a lot of problems and should make it easier to keep things ADA compliant.

I also share his sentiment about how to handle browsers that do not support CSS grid (just serve the mobile site.) However, I foresee convincing clients that this is acceptable being fairly difficult.

Great video thanks for posting!

[u/oOlaf]

Nice, this really got me into wanting to use CSS grid!

[u/senorfresco]

This the nigga from the lynda tutorials. I like this guy.

[u/rspeed]

I'm less than 100 seconds in and he's saying it would be impossible… but you can definitely do that with flexbox.

Edit: "Flexbox can't do that"

The HTML (exactly what he says won't work):

<div class="wrap">
    <div class="main_content"></div>
    <div class="other_content"></div>
    <div class="sidebar"></div>
</div>

It seems like he somehow failed to learn about both order and flex-wrap.

Edit 2: Around 11 minutes he finally gives a good example. Though his semantic markup which assigns classes to unique semantic elements is certainly "interesting".

Edit 3: Added a link to the first demo.

[u/[deleted]]

I HAVE WANTED THIS SINCE THE 90S

[u/fragosti]

Is the support for it as good as flexbox?