Angular and CSS Grid: Get ready to fall in love | Bill Odom

[Music] hi everybody normally I do this in groups of say ten to twenty five at a time so this is a little different let me flip over really quick to something other than the ad everybody able to see that good alright so really quickly a little bit of intro Eric was asking earlier so how do you want you how do you want me to describe like what you do and who you do it for and things like that and I said you know I'd really rather you just stick with what you personally know about me and then I'll do the the intro so Eric left out part of the the origin story which is oh what a few weeks months ahead of the first the coming-out party for stack blitz you and I met in California and I told him he was doing everything wrong in his life apparently I was wrong he seems to do it okay alright so what is it that that I do with most of my free time well if I look familiar it may be because of this anybody ever seen this website yes thank you Lance also an instructor for angular bootcamp so yeah if you look very very closely back there you can see you can see me there I am look at that the nice people who run angular bootcamp are always alright our Oasis digital you've probably seen the sponsor booth out there and they did that without telling me that I was going to be the face the international model for for angular boot camp and it does cause some interesting interactions in the hallways because people often know me and have no idea why they're like I googled angular one time and that face followed me all over the web so yes if you have searched for angular I've probably shown up in a picture in your browser hopefully not adjacent anything terribly embarrassing so a little bit of a background here I'm primarily known these days anyway for angular angular development angular training so I split my time between being this guy doing angular training but also being a working you know consultant technical architect guy who writes software for for big companies so don't doing the work that a lot of the folks in the room I'm sure also do so what am I giving a talk primarily about CSS well a couple years ago with the nice folks at Oasis digital I ended up on a project that was kind of this dream combination of factors all of us who've been doing this for a while you you've had the same problem over and over again undoubtedly it's like well we need you to do the impossible and it has to work in ie6 yeah all the gray came from somewhere but this project it was a little bit weird you know I'm the guy kind of brokering the deal talking with the client liaison and I'm like all right I need to understand the the basic requirements of your of your application first of all what browsers do you need to support and the answer was and I'm not joking it's gonna take us what about a year to put this together and what yeah probably so this is a really big projects like whatever version of Chrome is current then I'm like a Papa he's like yeah whatever the latest version of chrome is at the time the thing actually goes to production it's cool that's the only one we need to support so whatever you think chrome will be capable of in 2018 we're good like I love you you're the best client ever and they haven't gone back on it they've actually stuck with that so an interesting thing happened because of that particular requirement or lack of a requirement we were able to like live in the future there was no well make sure it works in ie9 or doesn't even make sure it works in I eleven wasn't even make sure it works in edge it was chrome from the future as long as you have that we're good all right second part of the origin story why I'm here in front of you talking about CSS one of the least favorite things to me about web development even modern web development has always been the lack of a good layout system now what I mean by that well if you go way back in time to like the very early days of the web probably quite literally earlier than some of you were alive we had things like this creating killer websites anybody here ever heard of David Siegel and hi-5 and creating killer websites I'm seeing nothing but blank stares that does not surprise me but at the time we're talking 1995 or thereabouts when the web was really becoming the web something for people other than physicists and nerds to use you had things like creighton killer websites and hi-5 websites and this is the dude that created and/or popularized two very very popular techniques at the time one of them was table-based layouts as in table tags and T ARS and T DS who here is done table based layout in their application okay finally see I'm getting to the point where it's relevant your life who here loves table based layout nobody raise your hand but even before that we had said I should have it pulled up here we had pixel shims anybody remember spacer gifts one by one invisible gifts and the reason that we had them was so we could move crap around on the page it's amazing anything ever worked at all but we did this and we did this for a long time David Siegel the killer websites guy he was one of the folks who either created or popularized this technique and I built a bunch of websites this way but I never liked it no right-thinking person ever did it was one of those things where we don't have anything better so this is what we're gonna have to do with ourselves and it was awful I'm not gonna go too deep into it but you need to understand the way that it works was by you actually having small gifts or gifs I don't care that let you put space on either side of them with like eight space and v-space attributes so that you could literally move things to a particular place on a webpage and if this sounds absolutely bonkers you are not wrong but then then a wonderful thing happened Internet Explorer 3 everybody's like what Internet Explorer 3 is the first place anyway that I encountered CSS cascading stylesheets and it was the thing that would save us all it didn't but it was supposed to be the thing that would save us all it finally let us start going toward the true promise of the love of the original web which was just just give us content mark it up with things like paragraph tags and h1s and h2s and just just let it be what it is and somewhere else some other magical place we're going to put the styling information and that was CSS so no longer did we have things like font tags to worry about or the blink tag we were able to like have true semantic HTML and style all that stuff in some other place but all that cosmetics aesthetics all that stuff somewhere else and while it didn't really work entirely the way that we wanted to it was at least a giant step in the right direction but one of the things that was missing and continued to be missing until literally just a couple of years ago was a true layout system now a lot of people in the room if you've got any familiarity with the ways that we've done layout in HTML CSS in other words the way we've made the browser like show what we want to show the way we want to show it you're probably thinking whoa wait a minute we've had things like bootstrap and and foundation and lots of other CSS frameworks they were clearly able to do some sort of layout for us we had flexbox we even had tables they were awful but they worked in fact there was a time when CSS wasn't doing what I was supposed to do and we had websites like give up and use tables com don't go there it's it's a it's not what it used to be so this is on archive.org and if you read it it's fantastic it's like you know we've all been there we want to make it work with CSS so here is a timer you can use as you struggle with CSS and when you finally get frustrated you're officially allowed to stop give up and use tables I sent this to a lot of clients times are different now times have changed and they are so much better than they used to be a couple of years ago after flexbox had become a thing that people could use and liked and I love flex bucks don't get me wrong I'm not this is not a bash flex flex box session but after flex box had become a thing and people realized wow this is an improvement but it is not everything that we needed CSS grid came along and one of the wonderful things about CSS grid is the way that it was deployed to evergreen browsers so within the space of about a month Chrome Firefox and edge and all the mobile browsers gained CSS grid capabilities and that was early 2017 first quarter of 2017 and it happened pretty much simultaneously across all these browsers so like I said they learned some things from the flexbox rollout if you were a few years earlier where it had been a very staggered release individual browsers had gotten it at different times and some of those browsers has gotten one version and some gotten a slightly different version in fact we still see holdovers of that today as we have libraries that live on top of our Flex implementations and tools like autoprefixer in order to make flex really look the same across to all the browsers and again I'm not bashing on flex it's just they kind of botched the rollout a little bit and even the people who did it they're like yeah we should have done a better job of that and they did with CSS grid with grid in the space of a month early 2017 everybody got the same grid more to the point for the previous four or so years grid had already existed behind a feature flag or behind some sort of flag inside the browser that said you know if you want to try this you can turn it on but you have to turn it on in order to be able to play with it and people did for years they really hammered on grid which meant that when it really got turned on for all of us to use in production web sites for real clients it worked and it worked really really well so all of this lined up very very nicely with my magical dream client that's like yeah just use whatever's current grid showed up at the point that I needed it most in my life and I fell in love hence the name of the talk because for the first time in a browser you can do true layout no hacking two dimensions rows and columns without having a bunch of extra stuff polluting your markup so what we're going to do in this particular presentation this were two set of workshops is we're gonna go through what grid looks like what actually takes to use it what it is is to use it well and then a lot of examples that are gonna build up from kind of small ideas to bigger and bigger and more complicated things that will be closer to what you would use in a real application but Before we jump into that I've asked a few questions about who is used what in the past who here has used CSS grid already how do you feel about it be honest is one of the things that I have found is that people often encounter grid and they have people like me going it's the greatest thing ever you're just it's it's finally arrived and they get into it and about 20 minutes later like you know no I don't get it I know I don't get what the big excitement was this seems really painful this this seems complicated i I know flex I had to learn flex and all of its weirdness I'm good I don't need another thing that seems to cover a lot of the same territories flex but with a different syntax and also it feels a lot like table layout but without the table markup and although people present that as an advantage sometimes that feels a little bit weird you're like I'm having to detach these two important ideas like my markup and the layout for my for my markup and I don't quite know how to connect the reconnect these dots we're gonna solve that problem in this in this talk alright so before I jump into the next section there's the thing I want you to do and I want you to go to github I'm going to preemptively apologize because I realized after I did this I included like a hundred megabytes of images so good luck Internet on my github there should be a thing under the repositories called space walk if I can find it I promise it's out there oh it would help if I made it public I apologize one moment please you guys get to see the big warning that says are you really sure you want to do this there's probably all sorts stuff in there you don't ever want to give away sure and settings there we go make this repository public oh dear God are you sure type the name of the repository yes I'm totally sure Oh God worked on my machine the really cool thing is is Eric sitting in the front row so when this inevitably has trouble with stack blitz I'm like Eric okay now there should be on my github a thing that you can get to called space walk and that's the application that I'm going to be using to demonstrate all this stuff and to do the workshops now this application is a big angular app and all the examples are components within this angular application I've done this quite deliberately so first of all go there clone this repo it's an angular CLI project npm install and then wait but go ahead and get that running and we'll see how we do it's gonna pull down not only the code for this but the typical 700 gigabytes of dependencies and then once it's up and once that's done you should be able to npm start and see exactly what you're seeing on my screen alright so this application is built in kind of a weird way I have deliberately made it so there is no sort of application shell in other words if I go to like this menu which we're gonna see a lot of in here notice there's no header at the top that says I'll click here to go back to the home page there's no footer at the bottom and the reason I did that is because I want every one of these individual examples to be something that could effectively stand alone which means to CSS that you're going to see while it's all real and while it all works is sometimes like gonna be duplicated across a lot of different examples in a real application I would extract all that stuff to some sort of set you know set of global styles and a bunch of CSS properties but I've deliberately kept each one of these examples as something that you could effectively pick up and extract to its own thing and use independently and hopefully that will make it easier if you not have to look in 17 different places to see what is that I'm actually trying to accomplish there now since I don't have a header and I don't have any place I can easily click to go anywhere there are some keystrokes that I put in place what's what's the old joke about you know any any real application over time eventually grows to the ability to like send email well any time you're trying to avoid using a slide package in a presentation you gradually build most of a slide package in your presentation that's what I've done here I have a keystroke that will take me to this menu I have another keystroke that'll take me back to the welcome screen I have keystrokes that will take me across different examples you'll see those in the code for the route component if you really want to see them it's back slash its back tick and it's the square brackets if you want to move around the same way that I'm moving around but I'm explaining all this to you not because it's super important to understand about CSS grid but so that you'll understand kind of the weird structure of this particular application it's done that way deliberately so that we'll have all of the space to play with on each individual page I'm gonna go a little bit more into the structure of the application in just a second but I wanted you to understand that so anybody that actually is fortunate enough to get the whole damn thing download it and get it running you'll understand how to move around inside of it alright other things about this particular application like I said it's an angular app because this is a combination of angular and CSS grid things but kind of gonna be really upfront with you this is mostly about CSS grid I want the techniques that we talked about here today to be something that you can pick up and use in any web application in any web document for that matter in fact several of the examples that we have are really going to be more document oriented just to explain some of these important CSS grid techniques without all of the superstructure of an application wrapped around it I'm not going to shy away from using angular when it's when it makes sense so for example in some of these things here like these divs I don't literally have nine divs on a page I use our friend in g4 to generate a bunch of divs but apart from that not super complicated angular code here that's the idea okay how are we doing on the download Dara even asked 71% it's two digits that's more than I was expecting by this point frankly I'll take it all right so here in our main menu we've got lots of different examples that are deliberately named so as not to give things away feel free to poke around on the source code if you want to but otherwise I can unfold them as we go first thing I want to show you is deliberately called the best feature ever so what do you think I'm demonstrating here on this page centering oh my god we can finally Center things without a whole lot of pain and anguish in in HTML and yes I'm making a joke but not really it was really really hard to Center things for a long time and not only are we centering something horizontally we're centering things vertically so if I come in here and I grab the corner I can actually like keep this thing really centered wherever I happen to be on this particular page the satellite by the way this thing I'm centering the plane at the background it's staying right where it's supposed to be so let's take a look at some code just kind of set the tone here by the way I'm a vim user you don't have to be of M user to be a CSS grid unless you want to be a good person okay all right so way down in here you get an overview of the structure of the code we're going to be jumping around on all these examples there's a handful of additional components that we're using we have that menu that I talked about just a moment ago so you know here is our app component HTML which we're gonna route to individual things so this is a pretty standard angular application from the perspective of angular code the only thing that's really weird is again us taking over the entire viewport for the individual examples you'll see lots and lots of application as you go and it will not there's nothing in here that will be surprising deliberately so all right so we were talking about centering well that's our example for centering in fact you can see if you look in the route that the route name and the component name that we're looking at are always going to match up that'll make it really really easy for you to follow on the code so here's what it takes to do this first of all the angular components so couldn't be simpler well technically it could I could get it rid of that static label but other than that it is a really really simple angular component we're basically just using it for its template here's the whole template literally just an image and nothing else and just just so you just so you're really clear about this I'm not doing anything outside of this component that would Center this thing on the page all of the centering is happening here in this CSS the only really important parts in here are the display grid we bump this up so you can see it deliberately setting the height of this to be a hundred percent of the viewport height and if you haven't seen viewport units before you gotta love them they're awesome and then this thing place items : Center it's a little shorthand that says I would like it to be horizontally and vertically centered please in whatever container I happened to be in put it right in the middle I can specify those separately if I want to with a line items and justify items people are always like which one is which I can never remember if you can remember how to use a word processor and you remember what the justify button does let you justify right or justify right just if I left justify Center that's what justify items does for you inside of a grid context which is what we've done we've said we want to be display grid and we want to place items in the center which means align and justify the items right in the middle now again I'm kind of making a joke here because centering has been a pain for a long long time but this is super useful to know and it begins to give us a little bit of a clue as to how CSS grid actually works you've probably seen lots of display : something in CSS before the most common ones by far our block and inline and if you think about them as like what div does and what span does that's block and inline display grid is a new one of these things and there's lots of them but display grid is the one that we're going to see most often today and it says I want the stuff inside of this particular thing to be displayed as a grid now what is this particular thing this part might be a little bit surprising : host I don't know how familiar people are with angular's view encapsulation frankly one of the most wonderful features of angular that you get for free right out of the box : host is a way of saying I'm inside of an oven I'm an element one of those fake elements that we use in order to create components I want to reach outside and grab ahold of that element and style some stuff about it I see a again I teach angular bootcamp I see people all the time the very first thing they do inside of one of their custom components is they put a div because they're like I'm gonna need a div to hold all the stuff together inside you already have one of those things to hold the stuff together it is the element that you created via the selector so we have an element it's the example centering element if we look inside of the Dom just take a look at this guy you'll actually be able to see there's our example centering element right underneath the router outlet so there's no need for an extra div but sometimes you want that extra div or the equivalent of that extra div in order to be able to style the thing that you're sitting inside of and that's exactly what : host does for you so if we come in here and look you can see we've said that we would like our angular element to be display grid this alone is gonna save you a tag on every element that you create from this every component you create from this point forward and that furthermore not only do we want reduce these B display grid we want to take up 100% of the viewport height we want the whole thing I could change this if I want I said you know this really needs to only be 70% of the viewport height after angular recompiles all my code we end up with 70% of the viewport height and I could furthermore move that around as well if I wanted to with other centering and alignment commands but just kind of showing off what viewport units are doing for you in combination with display colon grid and notice we're still dead in the center of the thing that we said not only takes up 70% of the height of the viewport so far so good what else we got going on here everything else is just sizzle I'm gonna put this back 200 I've said that I want my background image to look like a planet this has nothing to be with grid but it gives you some cool CSS stuff to take home and show off we've said that we want a radial gradient gradient it's going to be circular and it's going to go through several different colors in order to make it look like it's actually a planet and then behind the whole thing there's gonna be a star field that's where we get this star field and the thing that looks like a planet so the only thing that's on this on this page that's on the HTML element is the image and it's all happening inside of our example centering component so you get the idea so far anything completely bizarre and broken that you don't get how we doing on the download anybody still working on it I I heard something 90% oh we gave people false hope and then they took advantage of it and now now we wait all right but but it's still moving right okay cool um someone hey Erik someone should try to see if that reefer works on stackless it does not okay okay in others in my console must be stacked let's just fall remember I'm wise you can't argue all right so now that we've learned how to center and along the way of learning how to center we've learned a little bit about how we have to turn on grid let's make things a little more complicated notice in here all we did was say display grid we didn't define any rows or columns or grid template anything we didn't define anything except the display we said we want this thing to be grid and that already gave us some super powers the ability to like position things horizontally and vertically right in the center of the of the component but let's make it a little more exciting so if I use my back slash to go back here I'm actually gonna skip briefly over the some assembly required because I want to use that one as a source for workshop and go to playing with blocks and before I move on I should mention there's a good chance we're not going to get through all this stuff and I made a command decision that we that we make in our classes as well I'd rather leave you with more than we have time for then artificially end early so if I skip around don't be surprised if I skip over entirely don't be surprised either I want to use the two hours effectively but that may mean we don't get to everything that's totally cool you can take it home play with it all right so playing with blocks this is actually taking more advantage of grid than we were before I can tell you this is nine divs with a little bit of styling in order to make them show up on the page and the code is not super complicated here in our example blocks again pretty simple component let me back off a little so you can see the whole thing the only complicated bit is that we're building an array of labels so I'm deliberately saying you know give me a string array and then long as we've got less than ten of these things push the number as a string onto this array of labels so we end up with the string 1 the string to the string 3 and then we immediately turn around and use that in our template so again this is about the most complicated angular you're going to see in here hopefully it all makes sense we're saying give us one div for every one of the labels inside that that array of labels and then set the title of that div to whatever the label is that we generated title is not an angular thing titles built in HTML nobody ever really knows what to do with it so I'm like great that's exactly what I need gonna stick it on each one of these dips and then you can see the label inside the div itself you probably see how this is already shaping up each one of these divs now has a 1 a 2 a 3 etc inside of it makes it really easy to see where they are on the page but the real magic is happening inside the CSS like said a lot more going on so using that colon host selector so that we don't have to have like a wrapper div around the whole thing we can simply say grab me grab the element that I'm sitting inside of and make it display grid also give a little bit of padding because if I didn't have that padding remember I say every one of these individual examples is deliberately like completely stark there's almost no extra styling that we don't need so everything's quite plain including padding including margins and the reason that I do that it's going to become a lot clearer later when I start taking over the entire viewport so I don't want there to be any externally applied styling that says Oh put something in the middle of the screen or put a you know put margins around it I really want every one of my individual examples to be able to take over the entire page the entire screen but in this particular example I did want there to be a little bit of breathing room around it so now I've got an element to display grid it's got a little bit of padding around it but I'm beginning to take advantage of some of the things I can define about a grid I've said that this particular grid is going to have 5 100 pixel columns I could have done it like this on under pixels 100 pixels 100 pixels but life is way too short so instead grid gives us this really handy repeat CSS function can you guess what it does five times give me 100 pixels this doesn't exist currently outside of grid but it's so handy that expect it to start being in other parts of CSS one of the cool things about grid and flex before it is they both brought so many nifty things into CSS that it turns out would be really useful in other parts of CSS that they're gradually leaking out of CSS grid and flexbox repeats one of those things that you're probably going to see over the next couple years begin to show up in other places all right so we've said we want 5 columns and we also want 5 rows now that's a little bit surprising because we don't have 5 rows but that's fine just because we don't happen to have enough elements to fill up five rows doesn't mean we can't have five rows of the grid available to us if we need it in fact if I came in here and went back to my type script and really wanted to get crazy and say you know give me give me up to 20 I come back here and wait forever and eventually look at that as add as I add more divs the grid just keeps working so I've got 5x5 available to me and I filled up 19 of those available slots out of the 25 so far so good continuing on everything else in here is mostly cosmetic but if you notice there is one cool thing each one of the dibs is also marked display grid why because I want to be able to Center my number that's all I really did there is no additional rows columns anything inside here I just wanted to make sure my number would show up in the center so I said display grid just for the ability to get the one in the middle and the 17 in the middle and that's totally fine the cool thing about it is it shows you that it's perfectly OK in fact strongly encouraged for you to nest CSS grid arbitrarily now those of you who are old bootstrap jockeys the way that I am you can probably remember how much fun it was to like try to nest bootstrap layouts within each other you could sort of make it work but don't breathe on it don't get too close I always felt like you know those old speakers and if you get really close to them they go that's what a bootstrap nested layout I always felt like to me it's like as long as I don't look too closely it'll be fine that is not anything you have to worry about in CSS grid at all CSS grid you can have grids inside of grids inside of grids all the way down and that's exactly all we're doing here we're saying we've got a main grid that lays out our overall you know view and then inside of it lots of little grids so here on the screen we've got 20 grids going on the main grid that holds all of them and the 19 individual grids for the for the divs that alone is pretty handy and they could get as complicated as we want internally there's no limitation like well if you define rows and columns outside you can't define rows and columns inside no you're totally able to do that and we'll see examples of that later on everything else cosmetics want to make the font slightly bigger want to make it have a green border wanna make rounded corners because we live in the post jobs error and nothing can have square corners anymore everything else in here is just aesthetics if I took it away in fact I'll take away this part as well I'll just leave the border so you can actually see the divs themselves it all still works everything's great doesn't Leigh do an interesting question though kind of like you know tree falls in the forest no one's there to hear it does make any sound if you define a grid you don't put anything in it what does it look like I think it looks like let's find out now my template is completely empty and wait for the magic to happen keep waiting nothing why would I bother showing you this of course there's nothing there it's actually an important but subtle point grid is not an HTML construct grid doesn't really exist in HTML it's there like a force field there has no visual representation in fact even though grid is a thing that occurs inside of CSS there are no styling rules for grids you can't put a border on a grid you can't say I would like to style the gap between elements in a certain way this leads to lots of frustration people really like to be able to do this and I kind of expected eventually it will show up but as of today grids themselves have no appearance until you start putting things inside of them and at this point anyway that's a feature not a bug so if you ever find yourself going well I I don't see my grid well yeah you don't see the grid you see the things in the grid when you put them in place that's when the grid begins to show up but there's a trick if we go in here and inspect this guy take a look at the elements you'll actually be able to see we do have our example blocks element and as soon as I hover over to the dev tools sure enough there is a grid there it's just waiting for elements to be inside of it now I'm in the chrome dev tools to be able to see this and you get the basic structure beside the chrome dev tools now we can actually see all 25 of the places that we could put something but we don't have a lot of other information chrome is coming along in terms of its grid capabilities its grid tooling but it's not nearly as far along as Firefox's so I'm going to take this example that we've got flip over to Firefox and visit our playing with blocks example again and now I can hover over this and see much the same thing that we saw just a moment ago I don't have enough screen space can you tell I'm not on my big monitor at home there's my example blocks but I don't really see much going on in Firefox well Billy you just lied to us you said Firefox is really cool when it came to grid help but but it'd look better in chrome well you can ask for more help if you look down here we've got a little grid panel Firefox has a dedicated grid panel where you can say I want to turn on an overlay for that grid in fact I want to turn it on and I want to make sure I can really see it so I'm going to turn on the lines so it's very very visible so now not only do I get an overview of the grid but I get numbers for all of those things as well so the topmost line is number one if i zoom in a bit you can actually see there's my one two three four and it goes down as well 1 2 3 etc I got lots of things that I can turn on if I wanted to if I had area names which we haven't talked about yet I could turn those on I can extend the lines out infinitely so if I had a grid that was like partially off screen or even entirely off screen I could say extend the line so I can actually see where the grid would be if I could if I could see it off the screen great tools and you really really should get used to them this this gave me a reason even before Firefox like completely redid their engine and got really fast and relevant again this gave me a reason to go back to Firefox and keep Firefox as one of the main tools in my development arsenal that chrome would kind of you know taken over so make sure that you grab the latest version of Firefox and get really used to the grid tooling because it will help you a lot we'll see a little bit more of this later on all right so let's put some stuff back in this grid under our way back there so this is cool tells us a lot about what we've got but I don't know I don't know about you but not many of my applications consist of nineteen evenly spaced blocks that all look the same I want to be able to do more than this so before we move on give me a download check how we doing is it working if only I thought to bring a prize sorry anybody that's still working on it hopefully it's still progressing because we're gonna get to workshop in just a second I want you to be able to do it locally all right so like I said not many of my applications consist of just this sort of thing I want to be able to start using this for real and it's fantastic for applications but it's just as good for documents or things that would typically be considered documents so things where he got headers and content and asides and images and stuff like that so now I'm gonna go back briefly oh I'll show you the example first then we'll talk about code to that some assembly required example so here if you look we've got a header we've got some text we've got the best person in the world and we've got a footer at the bottom we don't make mistakes just have little accidents now this is actually fine the way that it is there's really nothing horribly wrong with this layout it's not exactly what we want but everything's just kind of straight line this is this probably be a fairly effective mobile layout but we can do more on a desktop so what I want to do is I want to use some of these new things that we've learned some of the grid stuff that we've learned as well as it introduced a couple of ideas that we haven't seen yet to start playing with this layout that's why your reason I call it a happy little sandbox so let's see what sort of trouble we can get into rearranging Bob Ross's a little article here so this example is example sandbox make this slightly smaller so I can see more on my screen and just to show you what we're working with here's the HTML for it not really anything shocking now immediately people are going to start going away tonight why aren't you using like the header element why aren't you using the main element we'll get there for right now I just wanted to show you plain old divs with classes applied to them because you're going to see a of grid code that's gonna work against HTML that looks like this also you might not always have control over the HTML that you're having to deal with with grid so knowing how to deal with HTML that may not be optimally designed often really useful so you can see at the very beginning I already have one thing that I told you I wouldn't normally have there's this big wrapper div around the whole thing so there's a div that goes from the top all the way down to the bottom and I've given it a class of sandbox so that we able to grab ahold of it later my heading no big shock class of heading I have a div in the middle with a bunch of paragraphs inside it's got all the content and then finally here's our picture of Bob and an h2 that we gave a class of footer at the bottom because I'm pretending I don't know about the footer element yet with our footer text inside of it and that's the whole thing not terribly complicated HTML we can get a lot more complicated than this and we will but we got a lot of pieces that we can play with them we got a lot of stuff that we can move around with grid but what we don't have is much happening over in the CSS so I've given you a little bit of CSS to start with so that you can actually see we've got a background color that's behind each one of these things inside of the sandbox every element inside the sandbox has been given a background color of white and the reason that it did that it so it's very obvious where each thing is on the page as we start moving it around I put a little bit of padding in place so that we weren't right up against the wall on our viewport but there's no grid there's there's no nothing in here that says lay things out a certain way it's basically all just source order I've given you a few empty spots down at the bottom because we know we're gonna want to put some rules in there in just a second but they're not there yet the only rule we've really got is the thing says make Bob really wide and Bob is really really wide right now it's probably the biggest bob ross you've ever seen in your life everybody just feels warmer already okay so let's do some stuff our sandbox element that's that big wrapper div we want to put something in there that says okay I'm gonna start moving stuff around and that is display : grid now that's the only thing I'm gonna change save that go back here and take a look and see what it's literally nothing there's just nothing to see here and that's fine if you give display grid without any additional rules you're basically going to get things laid out in the order that they came inside of the the Dom there are a few small tweaks and if we came in here and did something like grid gap and I'll say something really crazy like you know 50 pixels then as soon as I refresh you can actually see these are grid items and that's the technical term each one of those things that shows up in a grid cell or a set of grid cells that's an item in the grid or a grid item and what we're saying with grid gap is how much space that we want between each one of those cells so rows and columns can have gaps between them this may not seem like a big deal but this is surprisingly hard to do or hard to do consistently and grid makes it trivially easy we just say we'd like these cells range in this way and put this much space between them so if you've ever struggled a little bit with flexbox in the whole space around space between and trying to figure out what to do this is this is grid kind of leaning that way and it kind of gets to a theme of one of the differences between grid and flex which is flex is mostly about flexibility the squishiness of your layout Rachele andrea likes to call it grid while it can be made very very flexible and we'll see examples of that leans a little more toward the rigidity where you can say I want this specific layout sure these things can move around in a certain way and they can adjust around one another but primarily we want this layout more rigidity less squishiness that doesn't mean they can't be used together it doesn't mean they can't be used for a lot of the same thing there's huge overlap between what you can do with grid and what you can do with flex and we'll talk a little bit about where it makes sense to use one or the other but in large part a lot of what you might have reached for flex to do you can totally do with grid and personally I often find it easier at least I find the API surface a bit more straightforward to me this was a little easier to understand and some of the spacing mechanisms and flex for example all right so we've got display grid we've given a grid gap but we want to start putting things side-by-side so you saw an example of that earlier remember we were on example blocks and sure enough we had this grid template columns or the repeat so we're gonna read for that first I'm gonna come back over here and say grid it's like it's spell grid template columns and I'm not gonna use the repeat trick yet I'm just gonna put a couple of values in there so I'm gonna say like 200 pixels and 300 pixels notice I haven't placed anything anywhere I haven't said put the header in a certain place put the body in a certain place put the image anywhere all I did was I said my grid has two columns one of them is 200 pixels one of them is 300 pixels and that is really too narrow so we're gonna say 500 and like 800 and now you can actually see the grid beginning to take shape even though we didn't explicitly place anything the automatic layout algorithm the grid has living behind it starts to put things in the individual spots this is a really surprise we saw exactly the same same thing happening with our blocks but now they're not just blocks they're actual h2s and divs with a class on them and they're beginning to land in the different places that we defined in our grid notice also what's happened to Bob Bob's gotten a lot more manageable he doesn't take over the entire width of the page anymore we gave that 100% width and 100% can mean a lot of different things at a lot of different times in this grid item it means take up the width of that grid item I am glossing over an amazing number of details by saying that but for now it takes up a hundred percent of the width of that grid item later on we start to get a little fancy with images you'll see more tricks that we can do but already this is pretty useful but this isn't everything we want to do I'm gonna back off a little bit on this so I can have more space to play with we really want to start placing things in specific spots for example this header it's not really a header anymore it'd sure be nice if it took up the entire width of the content that we're working with here so that's the first thing that I want to try to solve so that is a div with class heading just to remind you what that looks like we've got our div class of heading that's the thing I want to make stretch all the way across the page I got lots of ways to do that I'm going to show you one of those ways and I'll warn you it's going to get a little bit unwieldy we begin to take this technique further that's totally cool we want to understand how it works so that we can do it better a little bit later on so in here I want my heading to take up a specific place so I'm gonna say grid column start and column one okay so see if that changes anything nope why didn't change anything because it was already starting in column one then people are like wait a minute we're all programmers isn't it supposed to be column zero no sorry column one CSS was not made for you it was made for those people that we have to like take their Photoshop mock-ups and make them make sense one we already started a column one so there's not really anything different there but what we can do is say we want to take up more columns so instead of saying grid column start here let's try remember tables what are we doing tables we wanted a cell to take up like more stuff we need spans so I'm gonna try spanning a couple these columns oh my god look at that remember what I said sometimes like working with grid is almost like working with tables without tables this is kind of what I mean it was already started in column one so we don't have to specify that but we could say we want to take up this many of those columns span two of those columns and sure enough that's exactly what we've done we didn't explicitly have to place this anywhere we simply said take up this much room cool that does now mean that our content block the div of class equal content is starting down here on the second row so we start in column one row one for a header span two columns and end up with our content starting in column one of row two now that seems a little bit weird because I didn't say anything about rows up here well that's fine grid totally is okay with that we'll get deeper into it later but there's the idea of what's known as an explicit grid the grid that you've defined and the implicit grid grid that gets created for you as you begin using it and if you have more things than you've actually defined places for grid school with that it's like great I'll just start giving you more an explicit grid and an implicit grid if we flip back over to Firefox briefly and go to where we actually want to be we can take a look at our notice div sandbox it realizes it has a grid on it so it's like you can turn the grid overlay on if you want and sure enough there's our grid overlay and if you look very closely you can actually see that grid forming up so the outer most boundaries that solid red line I made it red so it was easy to see that's the boundaries of the explicit grid but as we get further out our boundary lines begin to get dashed and dotted and they have different appearances depending on where you are in the grid and that's the implicit grid beginning to show up now the wonderful thing is we've actually got rules that we could set here about how CSS grid creates that implicit grid for us but we don't have to specify all of the rules for every possible item in the grid we haven't done that here we've simply said we're gonna have two columns and that everything begins landing in those two columns unless we've told it to take up more than two columns like we did here so far so good so what I want to do next well I kind of want my content to take up more room but I don't want to lose Bob I'm kind of liking Bob being up higher so let's try to put Bob where we really wanted to be like maybe over here on the left-hand side all right so Bob well what do you think Bob's class is sure enough class Bob we said he takes up a hundred percent let's put him grid column start well what what columns should Bob start in not zero one all right making one tiny change at a time let's see what happens okay well Bob's in column one but there's a problem we kind of wanted him to the left of our content but that didn't happen why is that that's because that automatic flow algorithm is doing what it's supposed to do it's like well you told where certain things were positioned so I'm gonna flow stuff around those things I'm gonna make things make sense unless you tell me more rules in order to position things fortunately you can absolutely say you have more rules so we don't want Bob to just start at column one we also want Bob to start at Row one all right one tiny change let's see what happens oops Row 1 is not actually what we wanted we actually wanted Row 2 this is what we wanted we wanted to Bob off to the left-hand side one of the content on the right hand side well header to go all the way across let's see what terrible and awful things have happened to our footer well they're not actually that bad how would we fix the footer here span - all right so what is our footer our footer is because we don't understand HTML sectioning elements yet H - of a class of footer so I'm gonna grab this footer I'm gonna say that the grid column for that is span - there we go gonna back way off so you can see the whole thing we have our header spanning all the way across the top we got Bob on the Left we've got our content on the right they're taking up the amount of space that we wanted - so Bob is a little narrower than the content and we got the footer that goes all the way across the bottom now we took a bunch of tiny steps to get there but if you step back and look at what we had to do what's actually that terrible we said that we wanted a display of grid give a little bit of gap I'm actually gonna bump that gap down so we don't have to worry about it as much we defined what our columns would look like and then after that it was basically a few tweaks where we took advantage of the way that grid automatically lays things out for us it was really just like spam - with the header span - with the footer put Bob in the right place get the idea all right I'm almost scared to ask how we're doing with our local installs I see lots of thumbs up okay so hidden away in our examples here or excuse me in our in our application we've got workshops so I want to start you off really simple and since I am a programmer and not a designer I started my workshops at zero so if you look at workshop zero we got four divs laid out they're not doing anything special about the only styling on this page is the borders and the background color for the divs and a little bit of padding so they were sitting around up against the edge if you look in the source code you'll see that there is a workshop zero and workshop zero has all the pieces that you need inside of it here's our HTML should look shockingly familiar it's basically iterating over a bunch of labels get a div for each one of them our our typescript is creating those labels for us but instead of creating twenty of them or five of them it's creating four I less than five the CSS it's really just styling the host element enough so that you've got some padding and making the divs visible on the screen so what I want you to do is using these tiny little building blocks are we get to play with some of the ideas that we've just talked about I want you to set this thing up with display grid and then I want you to position some of those things in places on that grid go crazy wherever you want them to be I want you to make them different sizes I want you to make them span multiple columns I also want you to make them span multiple rows once you've got some interesting things going on in your little toy grid go into Firefox and take a look at what you can actually see with the grid inspector experiment with the tools that your end up you're gonna end up using a whole lot now we have a workshop that's coming not too far after this it's going to build on these ideas plus the ones we were just looking out with Bob to build what's known as the holy grail layout but don't try to go there yet all I really wanted to do at this point is play with some of the ideas that we've expose you to display grid the host selector things like that so we'll take five ten minutes experiment with that stuff and then we'll move on to some more interesting things that will build on the ideas that we've already done and also show you how you can make this a lot less tedious everybody good go forth and conquer all right so let's play with this idea a little bit first thing I'm gonna need to do is make this thing display grid well I already had to display their exchange it to display grid save see if that made any difference at all nope just as expected didn't really make any difference but we want to start putting things in different places on this page so I can arbitrarily decide what I want to do here it was really up to you how you wanted to place things one key to that is having some way to grab a hold of an individual div and if you recall we have these labels that we're building and I'm specifically saying that each one of these divs has a title property based on the label that gives me a really easy way to grab ahold of an individual div because this label property ends up as an attribute or the value of an attribute on that div so in the CSS I can reach in and say you know all the divs are going to look like that but a specific div with the title of say 3a I'll put it in quotes that way it'll actually work I can make a little bit different so I'll move that to the top so you can see it specifically I want the border to be four pixels solid red on this guy let's see what happens nothing all right so we go in here take a look title label will make it really easy on ourselves we'll say that we'll just no no I don't want to cheat I don't want to cheat div three and background color though it sort of Lee nope still nothing geez excuse me oh of course there we go I'm so glad you're here there we go isn't that attractive Christmas colors all of a sudden yeah let's fix that all right light green all right so now that I can actually see that div I want to put him specifically somewhere on the page well that's pretty easy we can say that we want our grid row to be like 2 and our grid column to be 3 now there's gonna be a problem we haven't actually defined any of this stuff yet so grid is making this up for us this is a little bit weird it's kind of like with arrays in JavaScript if you say you know my array is 10 items long and I want to put something in slot 100 it just does it so we've got a similar thing going on here we actually want to give this grid a little bit of definition well we got to do that grid template columns and we can say that we want to repeat like three times at 200 pixels so now we actually have a little bit of definition and we can say that we want a grid gap of 20 pixels again so now we've got our grid beginning to form up if we wanted the three div to take up a little more room pretty easy let's go to the three and say that it needs to span two see what's happening this is a little bit strange because it's like wait a minute didn't we tell it to start no sir yes we did we told it exactly where to start and then we told it to span a certain amount of space a certain number of cells and so CSS grid has extended the grid for us in that particular direction now sometimes what we want to do is we want to say I want you to start at the beginning and go to the end but I don't specifically want to tell you where the end is so let's imagine that with div number three we wanted to do that that's a pretty cool trick notice I didn't need to know or care how big the grid was in order for this to work so can't see what I'm doing I've said what row to start with but for the particular column I said starting column one and go to the last column negative one is counting back from the other side and if we're in Firefox and we turn on our grid inspector for our workshop if you look very closely look at that that's line number negative one and row number negative one so if we want to position things like in a corner and the far right-hand bottom we can totally do that by saying negative one negative one or if we wanted to come back to negative two we could do that so we could say that this guy should go from the beginning to this line see how this works now this is all wonderful this gives us a lot of the primitives that we need in order to start really moving things around and positioning stuff on the page but unfortunately it is fairly primitive you need these things but it would sure be nice to work at a higher level so let's start moving up the stack a little bit so you remember back here with Bob we use that span trick and column start row start stuff like that to position things specifically on the page well we want to get smarter about that what would be really nice is if we didn't have to do so much math because it's really easy to get wrong do you remember when I was first trying to position Bob I put him in the first row instead of the second row and I'm like oh crap had to let me move that down easy mistake to make and you make it all the time what would be really nice is if you had somewhere to lay things out where you didn't have to and on that stuff so hard and there absolutely is a way to do it so in here we're gonna go ahead and move to another workshop say I load you all until a false sense of security and now remember writing a fair amount of code so this looks a lot like our Bob example except instead of Bob it's another really cool dude Carl Sagan I did remember the space theme it's Carl Sagan some quotes from the book pale blue dot by Carl Sagan and a picture of us most of you weren't born when this picture was taken but we are all here and that's Earth this is the pale blue dot in the essay and what we want to do is we want to lay this thing out kind of the way that we did with Bob but we don't want to use the same tricks that we did before so I'm going to save you a little bit of energy and a little bit of thought and show you what I would do to lay this out and then you can do the equivalent you can either follow along or you can do it after I've shown you show you how it works so this is workshop 1 in workshop 1 I've got all those pieces as HTML but I've started taking advantage of some of those HTML sectioning elements that we mentioned I've still got my wrapper div I'll keep him around for the moment but he'll e-even he'll go away eventually but now I've got a header element I've got this main element that has all of our paragraphs inside of it I've got a couple of images with classes on them so they're easy to grab ahold of I've got an aside another one of those HTML section elements and finally a footer now you might think wow everything's different now how do I'd use grid for all this exactly the same way you're just applying grid rules to selectors and in this case the selector is going to be element names or class names so we can grab ahold of the header just the way we did with dot content or dot footer or dot heading it's just an element name instead and since we're in an angular application and angular does view encapsulation for us it means that we don't run afoul of other problems by having rules like this that would normally cause the wheels to just fly off your application everywhere we've encapsulated this rule to just the one place that we want it to exist but what I want to do here is I want to lay out an article much like an art of the page much like I did with Bob but I don't want to use all those spam tricks like I did earlier they work but they're tedious so the first place I'm gonna start is with display grid so that's great puts us in just grid context we can work with and now I want to set up my grid but I don't want to set my grid up the way that I did earlier I want to take advantage of this wonderful thing called grid template areas and in here I can basically draw a little chart I can say that I want my header to go all the way across the page if I wanted to I could give it the specific size of that header row I want to make my main element do the same thing I want my footer to go across the bottom I need to put those pictures somewhere so I'll put Carl in one of those spots and I'll put the pale blue dot and another one now I've actually built this layout so that it looks exactly the same as what we've currently got and I'm not quite finished they still have more to do I need to say what each one of those grid areas actually corresponds to that's pretty easy you probably guess what each one is gonna mean so along with those grid template areas I'm gonna say that I have a header and I'm just targeting the header element and I'm saying that the grid area for the header is called header those names do not have to match they happen to in this particular case so see if we've made any progress here everything looks the same well kind of should because our source order layout and our grid layout so far is exactly the same I'll put a grid gap in here so you can actually see some of this stuff start showing up grid gap and we'll make it nice and large so it's easy to see see if that makes any difference sure enough now you can see our header actually lives on the page but just to prove to you that something's going on let's try flipping header and main aha something has actually changed now we haven't specified a grid area for anything except our header but this is already doing some work for us our main is in the slot right above where our header is our header is now somehow down on the page so this gives us a clue is how we do the rest of this stuff I'm gonna put header back where it belongs and I'm gonna start adding areas for all the other elements so Maine should be in grid area called Maine and footer should be in the grid area called and you guess footer a little more complicated to deal with the images but not a lot they have classes so we can't target them by element name but one of them is called Carl and his grid area is Carl notice it's not the same as the dot class name it's just Carl because that's all we called it right up here we could have called it Bob we've been confusing but it would work and then finally pbd that's where our pale blue dot image is supposed to go and we'll put that in exactly what you would expect grid area peb edy now again nothing really changed at this point because we've kept the source order and the grid order basically the same if you notice our footer is still showing up exactly where the source order said that it should so that's the first thing that we could fix we kind of want oh it sees me it's on our side we kind of want to move some things around a little bit so let's move Carl up to the top how would we do that well it's as easy as going in here and saying I'd really prefer Carl to be up here so it'll be right under the header now before I make this any more complicated you kind of get in the picture literally are you kind of getting the picture you're drawing a diagram of your layout and everything can be put in each one of those individual slots now this is great but if you remember we had Bob earlier and Bob well he was off to the side so we kind of like to be able to do stuff like that too so we need to be able to define multiple columns and it's a little bit unusual but it's not hard to do we can say that we're actually gonna have a couple of columns and things are gonna fall into those different slots so we'll just make the header and the footer go across two different columns and we'll make Carl stay off to the left-hand side of Main yep would help if I don't get Carl look at that our header goes all the way across the top was it was that almost some applause I didn't make it I'm just using it but yay so that pictures off the left main on the right are a side or our footer everything's laying out where we expected it to this is pretty cool except I made a typo there we go now once we do it everything should be where it's supposed to be I'll zoom way out so you can see even the zoom level doesn't actually affect the the placement we're still good so by default these things are simply taking up the entire width the viewport that we're working with and we can make this as complicated as we want if we needed 10 columns we could say the header stretches from column 7 to column 9 and main goes from all the way at the left all the way through right and the pictures or wherever you want them to be and it all just works if I wanted to I could come in here and say that the header should be a certain height remember grids all about two dimensions and you really have complete control over that so if I wanted to I could say that this needs to be 300 pixels tall so now our header is gonna be a little more aggressive up I killed my layout I apologize so in here we'll do auto here auto here and we'll actually give these things some widths as well just to do the whole thing out so off the left hand side I want this to be 200 pixels wide and this to be like 500 pixels wide oh excuse me also need to generalize a bit there we go so now you see what I've done I've made the header header I've made the picture quite a bit narrower by specifying some some measurements around the edges of the grid but everything's still working the way it's supposed to so I went from grid template areas so the thing called grid template there's even a shorter hand syntax called just grid where you can specify even more things but what I basically said here is here are the slots where things are going to fall into here's how tall that's supposed to be these others they're going to take out whatever room they take up in fact I usually just leave this Auto out there other places where I want to specify it but it takes up as much room as it needs to and then after a slash I'm saying how why each one of these things needs to be as a column and everything falls into place and again if I want to move stuff around if for whatever reason I decided that I really need my footer to be at the very top of my page then I could do that now I will warn you it's easy to get drunk with power with this source order is still important super important for things like accessibility screen readers they're not paying attention to what your grid layout looks like so try to resist the urge to go in and like just vomit out your elements wherever they happen to land on the page and then you CSS to put them wherever they belong because some things will still care about that actual source or source order so usually what I do is not what you see me doing right here I keep the the order matching the source order but if I wanted to it means that it's very easy for me to do things like you know I'll move pbd here and I'll make Carl slightly take up slightly more space so now I'm not really changing the order of things much that people might get to with their screen readers but it also works so see now my footer is landing in a different place anyway I want you to take advantage of this grid template and grid template areas idea and layout workshop Xerox use me workshop one however you would like to lay it out you don't have to do the same thing that I've done feel free to manipulate the HTML if you want to in fact one of these I really want to do is come in here and get rid of that wrapper div I don't want that to exist I don't need that so I can get rid of it now everything's gonna be broken but it's very easy for me to go and fix it because all I have to do is take advantage of the really handy host selector that says grab a hold of the element that I'm sitting inside of and style it accordingly I need to change the dot sandbox rule down here as well so that it says everything inside the host element but now we're back in business so take a few minutes do that and then we move on to more cool stuff the plan by the way here just so you know is we're probably going to do one maybe two more workshops but if we do two there'll be we were really short when combined with one of the other ones and the last half-hour third of these things it's mainly me showing you some of the things that you can do if we stopped and did workshops for them they take up all the remaining time but I don't want you to leave here without an understanding of the kind of crazy stuff you can get up to with grit because if if in your mind you're thinking okay cool it's great for page layout I totally get that it is but that's not the entire story or it's great for things that are rectangles with borders on them it is but that's not the entire story there's so much more that you can do with grid and several of the examples are about showing off some of those things and showing that you're not limited to to just the fairly conservative things that we've done so far before we completely move on from this particular workshop I wanted to show you a couple of things that we're going to get into more detail on here in the next couple of steps first of all this is what we were working with before we had our 300 pixel high header we had specific column widths that we had set up and if you notice one of things that we've lost is that beautiful full-page thing that we had going on earlier so adding grids seems to like taking us a step backwards we can totally put that back and in fact that's a great way to introduce one of the more wonderful features of grid and that's what's known as the fractional unit the FR unit where you can say i don't know how much space i have but i would like to take this chunk of it so let's try that over here instead of 500 pixels what I really want to do is take up all of the remaining space I want my leftmost column to be 200 pixels wide but then I want my right-hand column to just take up the room it needs the room it has available and I can say one fr to do that and now when i refresh notice that we're stretching all the way across the page again this is great and in fact if the page changes size it changes right along with it notice the padding is maintained we haven't lost anything we're no no scroll bars at the bottom everything's hunky-dory and in fact I'm not limited to just one of those I could say that I want a fraction of the room on the left and a fraction on the room on the right and now I'm going to end up with half and half because it's taking all those FRS that you're adding to get it's like adding them all up and says okay they've asked for one fr and another fr that's 2 FRS and then they want this one to be one of those wide and the other one to be one of those wide so 50% 50% this may not seem like a big deal but it is huge it is really really helpful in fact I'm lying to you about the percent thing because that wouldn't actually work here let's try it with 50% and 50% because that seems like a really natural thing to do but notice what's happened we have the dreaded horizontal scroll bar at the bottom we've got a little bit of jag back and forth and the reason for that is why well we defined our grid with a 50 pixel gap in the middle we want that gap we want the things to be separated from one another but then we set our columns were individually 50% each and so 50% of the width plus another 50% of the width plus another 50 pixels means we get a horizontal scrollbar if our units don't have this problem they are sensitive to the way the grid actually works so we can say one fr 3 fr for example and now it says one quarter of the room is going to go over here and three quarters are going to go over there this also works vertically so you can say you want to take up space so if you like define a height for your entire viewport or for what you want to use in your of your viewport you can take up fractional elements of it so I'll see that in a little more action if I go in here I'm gonna go to the pretty step remember space theme whew so it's just a simple image gallery but it's an image gallery that takes advantage of that fr unit stuff so if I come in here and start resizing the browser notice what's happening to the images they're getting slightly narrower until there's not enough room anymore and then we break across rows so this is using the fr in conjunction with some other really nifty grid stuff in order to make this gallery very squishy remember I said that flexbox is all about flexibility and squishiness but you could get a lot of that with grid as well the fr unit is often where that squishiness is going to come in that extra flexibility that you want so we look at this one this is our image gallery first thing we've got a little more going on in our component type script that we did before but I'm only bringing it up so I can tell you you don't really need to worry about it it is going to my space images service and grabbing the planetary nebula set of images that 80 plus megabytes that you downloaded earlier it's some of those pictures so congratulations you now have a set of planetary nebulae on your computer and there is right where they all landed so how do we make that happen well in the HTML not a real shock it's just an image element repeated as many times as you have one of these planetary image objects and we're grabbing the thumbnail out of it and again saying grab the or put a title on it so it's easy to grab with our CSS if we want to so nothing really exciting in the typescript or the HTML and that's a feature we don't want too much a layout crap in our HTML we just want to say here's the stuff now put the stuff where it actually belongs the place where you define where it belongs is in the CSS and in the CSS here is our definition no big surprise we start off with a display grid we've said we want 20 pixels in between each elements each item each cell of the grid we've done a little bit of additional work just to make the thing slightly more appealing so we give it that gray background color so those black images with the cool space images begin to pop we put a little bit of padding around the whole thing so that they're not slammed up against the wall but the magic is right there I specifically include this example because you will see some version of this pattern over and over and over again it seems a bit complicated but after you've seen it 500 times the way that I have now you'll be able to type it with your eyes closed it's essentially saying that we are going to want to automatically fill up the available space that we have in this case horizontally because we're dealing with columns and we want to make sure that everything is at least 150 pixels wide but can take up to one fraction of the available space well what is one fraction available space and the answer is it totally depends on how much room there is to work with so as we move the browser back and forth everything is changing and squeezing and moving around because we've said take up the room that you've got but don't ever let anything get narrower than 150 pixels so this repeat plus autofill plus min Max and a lower bound and the 1f are very very common pattern that's that's basically a magic spell in grid you will use it over and over and over again everything else in here just details we've said that our image elements should take up all the available room that they have within the cell that we're working with and we're doing object fit to cover not specifically a grid thing but it's a it's a wonderful fairly recent addition to CSS well recent as these things go that simply says I'm going to want to put this image and have it not get squeezed and change the aspect ratio I want it to like fit in the middle of this thing so if you notice as we begin moving around the individual images Sebago zoom in and show you they are actually changing a little bit getting a bit narrower but we're keeping the image basically in the middle so you want to see some cool tricks you can do with images object fit : cover contain and a bunch of other settings that you can use that make stuff like this super easy to do again not specific to grid but really really handy to have around so there's not a lot going on here but there is a lot going on here the fr unit is your best friend think of that fr friend you will use it all the time don't use percentages they're almost never useful in grid because you almost always end up having to do some horrific calc call in order to make percentages make sense when you should have just reach for F R in the first place fr is what you're gonna want to use the set of percentages it just makes things so much easier alright a couple of things that I jumped over to get to the to the image gallery the good grids gone bad is mostly an excuse to play with the debugging tools but there is a new thing in here we haven't seen before so don't want to completely skip over it notice seven and three turns out that one of the coolest features of grid is the ability to overlap elements so far we haven't seen that headers been where the header goes and the content goes where the content goes and the footer goes where the footer' goes but it turns out that you can overlap things very very easily in grid so I'm going to show you a simple example of this and then show you one it's a little more realistic so in the debugging step again we've got a whole bunch of labelled divs just like we had before we've got those divs laid out in the HTML but with no styling no no layout applied to them directly and then in the CSS we've said how we want the grid to work well this was a much simpler definition we simply said we want five columns and 5 rows each of the hundred pixels wide same definition we've seen before but down here we started positioning things so that they deliberately overlap notice three starts in column one goes three cells wide if we look down further seven specifically takes up one column all the way to the left hand side that's how I end up with this whole thing stretching top to bottom it didn't specifically say a span it simply said start at the beginning go to the end well turns out that that overlaps with three and that's totally cool there's nothing wrong with that that's not an error it's not a bug you want to take advantage of it I don't know how much work you've ever had to do with like absolute and relative positioning and z-index and all that grid makes stuff like that so much easier you can lay out your page and then simply say I want these things here and these to be on top of them and you can use the index to determine the order really really easy to do little more exciting version of that is the point worlds collide space-themed whoo now I've specifically set this up so that most of the smaller planets Venus and Mars and Earth are taking up one by one but Saturn's taking up more room horizontally Jupiter's taking up more room both horizontally and vertically and then I've explicitly positioned some other things in odd places inside the grid it gives me a chance to show off some of the things you can do that we've talked about and some of the things that we haven't seen before so in here overlap there we go here's our HTML we're just putting out pictures of planets so in this case instead of grabbing the planetary nebulae we grab the planets themselves that's what the typescript does for us it simply says grab ahold of the planets we're seeing them one image at a time everything is really happening in the CSS same definition they'll be soon to seen before all the way down to the to the grid gap I've done a little bit of alignment stuff just to make sure things show up in the upper left hand corner of each one of these items didn't really need to do that here but it gave me a chance to talk about the ability that you have to align things individually if you want to but over the entire grid which is often what you want to do we've seen a little bit of this already with the place short shorthand so in this case we're simply saying a line in other words move things vertically to the top but we could have also done justification here if we wanted to each one of the images is going to take up 100% of its available width of the container I've given it a border just to make that border a little more obvious I'll change that to red so you can see it and you'll see that each one of these things is really just taking up the size of the images we've specified it that by the way is also a wonderful debugging trick a lot of people I'm surprised don't know about the outline property people use borders for this all the time and there's nothing really wrong with that except that borders take up space outline specifically lives outside of your element and doesn't take up any space so if you really want to like see where a thing is without having the the border affect the positioning outline is actually what you want now admittedly you probably should be using like a debugging tool like the chrome dev tools or Firefox but sometimes you just want console.log for CSS and that is it all right so here's where we start positioning things we put in hello we put mercury up in the upper left hand corner or excuse me we use the negative one so we put it specifically in the right hand bottom corner so this is mercury right here earth we put at a specific row and column index so that's how I ended up here we could have also counted backwards if we wanted to so far all stuff that you've seen before Saturn and Jupiter a little more interesting because they're taking up more room and they're being told to start at specific places so in this case we've said that Jupiter is going to start in row 3 and span for two of them and whatever column it's in is going to span for two of those as well so that's how Jupiter ends up taking up so much additional space Saturn same idea except we specified not only the amount of room it takes up but also where it starts and those things can totally overlap so we said that Saturn is going to start in column three and span for three let's see what happens if we put Jupiter in column three just what you'd expect now Saturn is on top of Jupiter and so is Earth because I snuck something in there while we're watching I said that Earth has a Z index of 1 so everything else where the Z index of zero is going to be behind it Earth wins moral of the story is grid is fantastic not only for like positioning things in an absolute way but you are not limited at all in overlapping those things so if like me you've ever struggled with relative positioning absolute positioning trying to get things on top of other things this is a great way to do it without having to struggle with all that stuff all right so I've told you about the the grid template grid template arias thing and it's been really cool but we've used it for basically really simple stuff at this point I want to show you how you can stretch it you can really kind of go crazy with it so breaking away from the space theme for a moment let's take a look at a deck of cards these are not pictures there are pictures here but the pictures are the faces on the face cards everything else that you see here is actually done with HTML and CSS so if i zoom out we've got all the cards all four suits all the ranks what we're doing is we're generating each one of those things so if I look in here in the playing cards example you'll see that I've set up a little more component action than we've had before we've got suits and we got ranks that gives us things to iterate over from our HTML in our HTML we've said that for each one of the suits and each one of their ranks we want to show a playing card everybody here familiar with energy container if you're not you are going to love me energy container is fantastic because it's a way of attaching logic inside of a template without actually having that need without needing an element for that logic to go along with energy container disappears at runtime you just end up with whatever you generated so in this case we're essentially using these for their looping capability but there are no elements in the Dom once we're done the only thing we end up with is a bunch of playing cards if I inspect this you'll see that apart from some comments that show where ng container was all we have are playing cards so in here I want to back up there we go there's our individual playing card collapse this guy lots and lots and lots of playing cards courtesy of ng container again nothing to do with grid but given the way that grid works and the fact that grid works unlike direct children or whatever container you using oftentimes in G container is the thing that you want to reach for in order to make sure that you only have elements at the level you want them alright so now we have a whole bunch of playing card components which means that we finally get to do a little bit of angular stuff and look at a completely separate component here's our playing card component and you might think things are going to really crazy in the HTML will they do but maybe not in the way you expect this is what a playing card looks like when you put it under an x-ray in HTML so we have an entire wrapper div of playing card with an additional class of front around it so there's a good excuse to actually have a wrapper div and we're applying a specific class to it now we're gonna see how that gets used in just a second and then we've got the rank in one corner and an inverted rank in the lower right-hand corner this is the structure of a playing card here's our rank in the top left and our rank in the bottom right flipped over we've got the suit that we're working with but it's in the form of this PIP that's what these things are actually called pips right there and we've got an inverted one down at the bottom for the corner and in the middle we have all of the stuff we need to do depending on whether there's a face for the face card or not so if there is a picture associated with this thing that's going to be a king or a queen or a jack if there's not then there's simply no image and then we have a div that shows the appropriate number of pips for every card so card number seven has seven of these symbols but notice there's nothing in here that says put the seven symbols in a certain arrangement all that's happening over in the CSS so let's go there now I've done this with sass just to make it a little bit easier to structure the CSS there's nothing sass specific about this other than that nesting so our entire host for the playing card itself is a display block but we're gonna get to display grid in just a second so screaming through a bunch of this stuff it's mostly about sizing this is the part you care about there is the layout for a playing card stuff in each corner flipped upside down the bottom right hand we've got the design in the middle and notice the design is going to take up three chunks in the middle so it's horizontally centered and vertically centered but taking up a specific amount of space so we've got plenty of stuff to work with to lay out our pips in the right way and if we keep going a little further down more and more details but the really important stuff the really important stuff we start getting into individual carts and I'm just going to scroll through them so you can see how this begins to look can you guess which one that is that's two that's three that's four five and so on I'm not recommending you actually do this mind you there are better ways to show pictures of playing cards but mostly what I want to show you is how far you can take this whole grid template grid template area thing and notice each one of them not only has the template the layout for the card but also measurements associated with it I could have simplified this a little bit but I wanted you see those fr units in action so each one of these things is taking up the appropriate fraction of space both horizontally and vertically all the way down and then finally at the very end after I've got all of those individual configurations set up I'm associating them with the appropriate grid areas for each one so I'm racing through this example because we run a lot of time but I want you to take a look at it later when you get a chance and see the tricks that I'm using to really take full advantage not only of grid but of also several other CSS things just to do this ridiculous stunt alright so remember I said that we weren't at all limited to what we could do like nesting wise with grids this is a good example of that so here in the I object these are all what are called media objects I think stubborn Ella came up with this Nicole Sullivan a few years ago the idea of a media object the Internet is kind of made up of these media objects if you if you look on Facebook you see a picture name and then some text and oftentimes those media objects are nested inside one another well I've built a simple version of this so that you've got excuse me a picture a name and then a description for each one of these these are these are all women astronomers and astrophysicists by the way and just like with our images these things scale intelligently and once you get below a certain level begin to change the way that they wrap so you're not just limited to cool tricks with images these are individual angular components that have a grid inside of them and that grid is set up to like be responsive within whatever responsive shell you've given it so here in our example for media objects we're showing one of these media object components for every one of the items in our list all we're doing in the typescript is grabbing our data set that we're playing with so this is where all the women in astronomy are coming from and then in order to not play favorites I'm shuffling the array every time I look at it so that different people show up at the top then finally in CSS here's all I had to do in order to make that work now this is the overall grid this is not the individual cards the individual media objects but I wanted to lay them out a certain way look familiar we're repeating automatically filling with a min/max can't get any lower than 300 pixels wide but we can go up to one over one fraction of whatever space is available to us you'll see this over and over and over again the individual media object itself a bit more complicated the HTML is nice and simple it simply says take the image take the header take the description lay them out in the HTML no layout here at all nothing that says put them in a certain place other than the source order but the CSS says here's all the stuff that I want to do to make sure that it makes sense so here's my grid template we've got our image along the left hand side we've got our header above the description the header takes up an automatic amount of room the description is going to be at least a hundred pixels high but take up up to the fraction of available space that you have the image is going to be a hundred pixels wide and we're gonna go from nothing up to 1fr now that's another one I want you to commit to memory you're eventually going to come up with some sort of grid where you're like my items are growing in a way that I don't want them to and the reason is because 1fr really means min/max of auto to 1fr in other words take up the space you need up to the amount of space available sometimes that's not what you want sometimes you want to say take up maybe nothing and go up to the fraction of available space so that min max zero to one fr it seems like you should be able to just change that to one fr doesn't work 'we min/max to 0 to 1 FR gives you the behavior that you often want that's what makes this squishiness actually behave the right way now there's a bunch of other details in here but they're mostly about making sure that when we get below a certain point that things like these headers begin to put ellipses on there and they don't wrap in a way that we don't want them to but none of that is grid specific that's all just plain old CSS but it works fantastically well inside of grid so here's my header being told that it needs to go into the grid area called header with all the font stuff and then these 3 little bits that say make the header do the right thing when it gets too narrow so just stuff like that alright I think I'm gonna have to skip a workshop but there's something that I want to show you that I think you're really really dig in fact two things back-to-back first of all we're all application developers right a lot of the stuff has involved things that look suspiciously like page layout that's ok you know pages are still good we have pages inside of our applications but a lot of times what we want to do is actually lay out an application that takes up the entire viewport and we own the whole space no scrolling or if there is scrolling scrolling only on spots we want so here under so much room for activities we've got a full viewport application and notice we had a menu slide in from the side now I'm gonna resize this whole thing watch what happens to the header and the footer see how they're staying with me this is not always easy to do with grid it's trivial this menu can come and go and notice it's overlaying so it's slightly transparent a grid layout very straightforward so here in our full viewport we don't really have much going on that we haven't seen before inside the component it's simply saying gimme a set of these spaced posters that's where you're seeing there in the middle there really cool you should look at him when you get a chance the HTML says that we have a header section that header section has little clothes and open button that we're working with and it has links inside of it excuse me a link inside of it to go back to the home for this application we've got a nav bar on the left hand side but notice it's just in source order so we're just dropping elements in the HTML we haven't said where any of them actually go yet down at the bottom we have our main section that's where all of our pretty posters show up and then we have a footer that has some additional links in it and nothing in here that looks like bootstrap layout classes nothing in here that says put the nav bar on the left and make it slide in and out nothing that says keep the footer sticky at the bottom all that's happening in the CSS so in here more of that grid template action that you've seen before but with a couple of extra tricks so our header goes across both of the columns that we've got defined our main section goes across both the columns we've got to find and our footer goes across both the columns so immediately you're thinking why did you do that twice why didn't you just say header main and footer well that's because we've got one other thing we've got this little menu that pops in and out but it lays over the top of things that we defined in our grid template so we didn't really have a great way to name it in our ASCII art instead what we did was we said name the lines on this grid so before the beginning of the main section and at the end of the main section let's call that nav start nav in and notice we're doing that for two different places we've got nav start nav in and we've got nav start nav in at the bottom so we've got a columnar version of this and a row version of this so this one even though it's laid out like left to right you might think that refers to columns it really doesn't it's saying that our navigation starts above the main and below the main in other words it takes up that amount of space but it doesn't take up the entire width of the viewport it only takes up the left-hand side so there's our now start nav in we didn't have a way to specify that in the grid template but we do have a way to name it with the grid lines and the really nifty thing is if we name them the way I've named them here with the - start and - in they become kind of this phantom grid area so if we look down at the nav definition I said grid area nav even though there is nothing in that grid template that says nav it's just the lines put all that together and that means that the nav section has a home but I don't always wanted to show up so I can send it that way about a mile that's exactly what I've done I've said translate from where we should be way to the left if you look very closely if i refresh this page you see it actually comes swooping in that's because when I first start up the application I bring it from where it was over onto the page you can actually see the menu show up the important takeaway from this is that just because grid says where things go on a page doesn't mean they have to stay there you've still got the ability to transform stuff and move it around so two important idea is to take away here one is the ability to define the entire viewport so we've done that in several ways already but they'd always like scrolled so there's one other piece and that is to say that the entire height that we're working with is 100 percent of the viewport so we didn't want to stretch beyond it we don't want it to be too small we wanted to take up all of that room that's 100 VH and then we lay out the grid on top of it to put everything where we care about and then we have the ability to use things like transforms to move things off of the grid and you can go really crazy with that stuff for example here's a bunch of female astronauts and I've drawn in the background if you look very carefully see that grey line that's actually the border around the grid element the thing that we're sitting inside of but if you notice these pictures they're not staying within that area in fact not only are they not staying within an area they're they're breaking out a little bit they can break way out so we have the ability to transform animate do whatever we want to do in order to pick these things up and move them around so the grid says where they would naturally be once you've got them where they would naturally be you can put them wherever you want and you can use this for more than just you know nifty playing card views of or knots like this so here's a video player so on this if I select one of these videos you see the video player show up and if the internet cooperates you see the video player eventually show up as well and I can scroll through and pick a different one pick a different one everything's hunky-dory this is all laid out with grid which is a little bit surprising because this thing is like coming towards you and tilted sideways and how is all that working well it's all done the same way that I just showed you where we have the video player and that video viewer has just a handful of elements on it we've got a video list and a player at the bottom that's like the the entire template is right there everything else is happening in the CSS where I say here's how I want my grid to be laid out and I want it to take up a hundred percent of the viewport height I want it to have a list on the left hand side a dead cell in the middle of it that I'm not actually going to put anything inside of so I'm not going to name it the player on the right hand side that's going to take up as much room as it needs to and then the list on the left is going to be at minimum 200 pixels but up to one and a half of the fractional space available the dead zone is going to be half of the fractional space so I leave a little bit of gap between my video list and my video player and then on the right hand side it's just more the same the video player has got to be at least 250 pixels wide up to two and a half times the available space everything else in here is me getting really freaky with perspective so I'm transforming translating rotating I'm making the actual list itself bigger than the viewport so if I look in here at all the places where I'm using VH units notice the video list is a hundred and thirty percent of the viewport height that's why it's stretching off the top and stretching off the bottom still grid it's still using grid to put everything where it belongs but then taking those things moving them twisting them and stretching them wherever I want them to go this is arguably the most complicated part of the entire example and I say that because I don't understand it I found it and it worked it makes the cool holes on the side of the filmstrip and if you understand it you're better than I am all right let's bring it home last a little bit I talked about perspective and how you can do all sorts of really cool things with grid so it seems weird that I would I would go back to the most boring grid possible just a chessboard it's not just a chessboard in the same way that individual grid items can be respected and transformed and translated in all that you're not limited to the grid itself being this flat thing on your screen so this chess board let's flip around I wish my microphone keep working and put it back where it started rotate it so the reason I'm showing this to you is because I want you to realize rectangular areas aren't really as limiting isn't my first sound because you can take and turn your grid around turn things sideways tilt shift pan whatever you want to do and when you combine that with things like the ability to do animation of grid gap you can go from chess board to dance floor moral of the story grid is 19 kinds of awesome you want it in your life if you've experimented with grid before but you've stuck to like the spans and the rows and the columns things like that and thought well this is good but I don't get what all hype is about hopefully I've convinced you that there is more here to look at wish we'd gotten a chance to do a couple more workshops because I did want you to get a chance to build one of these fuel full viewport things but they're there all the workshops are out there zero one two three four and all of the examples that we've looked at as well as a handful of examples that we didn't get to so please play with it take a look really explore it there is a lot to love here last thing I've given you some resources there are some names that will keep popping up over and over and over again Jen Simmons Rachel Andrew are the big ones they are like the Queen's of helping people understand how grid works you should definitely take a look at Jenn Simmons layout land video series on YouTube you should definitely take a look at her labs I've linked both of them here you just follow what she does she's on the CSS working group so is Rachel they do amazing things Rachel andrew has grid by example and CSS layout news which helps you keep abreast of what's going on in CSS which is really worth keeping up with in the evergreen browser world Dave get us a name really well known in the angular community has CSS grid critters so if you want to like learn how to do all this cool stuff in grids with gamification you totally can do that as well CSS tricks I probably mentioned a couple of times has a complete guide to grid that's a cheat sheet and then a bunch of articles on CSS grid as well that are worth reading and then a handful of other things down here at the bottom I like to point out to bosses that can I use says yes we can totally use grid look how much support there is for it so this is worth it definitely worth your investment in time and learning so hope it's been useful I appreciate everybody's attention let me know if you have any questions I'll be around for the remainder of the conference or you can shoot me an email thank you very much [Applause] [Music] you

Channel: ng-conf

Views: 36,524

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming, ngconf 2019

Id: lh6n0JxXD_g

Length: 108min 58sec (6538 seconds)

Published: Sat May 04 2019