The Joy of CSS Grid - Build 3 Beautifully Simple Responsive Layouts

today you'll learn the basics of CSS grid by building three different grid layouts from scratch the first example is a responsive 12 column grid it replaces most of the use cases that you'd find in a grid system like Twitter bootstrap but it does so with only three lines of code and removes the need for all this crazy markup from your HTML next we'll build a responsive photo gallery and third we'll build an explicit grid that has this fancy staggered intro animation by the end of this video you should know enough about grid to start putting it to use in your own projects if you're new here like it subscribe and feel free to grab your mouse the keyboard to code along with us when you start just have a good feeling and be happy and in love with life in the world and sit down and begin playing I'd like to start off by sharing my own experience with grid because on fire ship i/o I was previously using a flexbox based system like you would find in bootstrap and many other CSS frameworks now there's nothing wrong with using a third-party solution but when you use grid you don't have to add any additional CSS to your bundle size the grid system just works natively in the browser but the much more important benefit was how much it simplified the code base my HTML markup had a bunch of columns each with its own collection of classes to make that call and responsive after moving to CSS grid I was able to remove all these classes and implement my own grid system with just three lines of code and on top of that beautiful designs that you would normally only find in a magazine are much easier to implement with grid because the system itself is inspired by print based grids now I should warn you that grid is pretty weird to learn at first so let's jump into some examples and understand what every line of code is doing you can follow along by opening your editor and creating an HTML and CSS file or you can clone the project from github and you'll see that each grid is broken down into its own HTML and CSS files this first grid we're building is basically an infinite set of responsive columns and that's really useful if you have something like a feed of cards like the lesson feed on fire ship IO and a grid like this will also replace many of the use cases for something like Twitter bootstrap grid go ahead and open an HTML file in BS code then start typing HTML to autocomplete the boilerplate code next I'm going to go into the head of the document add a style tag and an import our base CSS as well as our basic grid for this example the base CSS file is just something that I'm going to share across all the examples if we open that file you'll notice that it has a class that defines a flexbox that aligns its content in the center none of this code is actually required for your grid to work it's just there to make things look nice so feel free to copy it from the main repo now going back to our HTML we'll go into the body and set up a section that will serve as our main grid container then all of the immediate children inside of this container are known as grid items now for this demo I'm adding 12 children to the grid but I'm assuming the content inside the grid is dynamic meaning we might have three items in there 50 items or whatever so what we need is an implicit grid that can figure out the right number of columns and rows based on the content size and the viewport size the first step is to set display grid on the container and you'll notice right now everything is just stacked up in a single column let's start by giving our children a little bit of spacing we can do that with the gap property instead of setting margins on the children that will guarantee that we always have one REM of spacing between the items both horizontally and vertically now one way to create columns is to use the grid template columns property let's start by creating an explicit grid or a grid that has all of its columns defined in advance now since we're talking about columns think about the width of the grid 1fr or one fractional unit represents one part of the available space currently we have one column so when fo r is a hundred percent of the available space we can add another column by simply adding another F our unit and now one fr equals fifty percent of the available space and we can keep doing this for as many columns as we need or in our case twelve columns the end result is an explicit grid that always has twelve columns but there's a few problems here first of all this grid is not responsive and this code is really ugly fortunately CSS grid has a helper function called repeat instead of writing out each column manually we can simply call repeat twelve and then pass in the unit that we want to repeat this code is identical to the code above but much more concise and readable now currently in the demo each column is too thin let's look at how we can set a minimum width of 240 pixels we'll try again by repeating twelve columns but this time use the min/max function this is like saying make sure my columns don't go below 240 pixels and width but allow them to expand as big as one fractional unit will allow what you'll notice is that our cards are no longer too skinny but we now have another problem they're overflowing on the horizontal axis so the question becomes how do we make these columns break down into additional rows when there's no longer available space the answer is by creating an implicit grid when we call repeat instead of repeating twelve times we'll repeat with autofit and then use these same mid max value as before what autofit does is tell grid to calculate the number of rows and columns on the fly and now you can see that we have a truly responsive grid it only took three lines of code and no additional markup or classes in our HTML it's worth noting that there's also an autofill option the difference is subtle but important notice here in the demo how the top autofill option is going to create additional columns when there becomes additional space but autofit on the bottom will expand its children to take up all of the available space now when you're working with grid and things aren't going the way you expect open up Firefox dev tools it has a really good grid and flexbox inspector and you can see here how it allows me to visualize the lines and tracks on the grid now it's time to move on to example number two a responsive mosaic photo gallery what you'll notice about this example is that some of the photos are bigger some are taller and some are wider and they also reposition themselves gracefully when the viewport size changes let's start by going into the HTML and setting up a grid container inside the container we have 12 divs like we did in the previous example but each div has a photo URL as its background and by the way these are free to use photos from unsplash now if we go into the CSS will use the code from the previous example as our starting point but you'll notice the rows in the grid are very short that's because they're being automatically sized to the text content in the children now when you have an implicit grid like this it can be useful to set the size of the row if we want all of our rows to be exactly 240 pixels tall we can set the grid Auto rows property to that value and now each automatically created row will be fixed to that height now our goal is to change the sizing of individual grid items let's create a class called card tall any item with this class should span across multiple rows vertically we can do that with the grid row property and then span to will tell it to span across two rows from its starting position we can use a slash to also specify its ending point which in this case can be figured out automatically by the grid algorithm so the grid Row property is like saying start here / end here it makes more sense when you look at your grid in Firefox display the gridline numbers if we look at the first photo you can see it starts at column 1 Row 1 then ends at column 2 row 2 if we want to make this photo taller we can do so explicitly with the grid row property like saying start at horizontal line 1 and end horizontal line 4 and now you can see that photo spans across 3 rows and everything else was repositioned accordingly but since we don't want to use the line numbers explicitly will use span 2 to say start wherever span 2 rows and then automatically end wherever so that's how we can make an item taller if we want to make an item wider we can use the grid column property and we can implement it with the exact same value and now we can go into our HTML and start applying these classes to the items the end result is a response to photo gallery but there is one slight problem at smaller sizes spanning two grid lines doesn't work very well notice how the items on the right are way too skinny we can easily fix this by wrapping our classes in a media query this means the classes will do nothing on smaller screen sizes and will only be applied if the min width is greater than 600 pixels in the viewport and now things will look much better on small devices and that brings us to grid number 3 it has this intro animation and notice how each grid item comes in clockwise until it gets to the center you'll also notice the color changes as it's being animated in and the middle columns are responsive based on the viewport size now again we have the same basic HTML structure just a bunch of divs inside a grid we'll set the display to grid give it a gap but this time we're going to create an explicit grid using grid template areas this is a really cool property that allows you to create an explicit grid by giving names to the different areas in the grid notice how we have the letter a in the top left and if we follow that clockwise it goes all the way to L and then in the middle we're actually using emojis to represent the main content and a shout out to Paul Newton who commented on the last video explaining how you can get even more abstract with your grid area names notice how he's using shapes to define the grid areas making it extremely clear which part of the UI each grid area is for now once you have your grid template areas defined you can set some sizing for the rows and columns in this example the grid container has a fixed height so we'll have each individual row take up exactly 25% of the height using the repeat function when it comes to our columns will give the first column a fixed width the two middle columns auto property to automatically resize based on the viewport and then the last column a fixed width also 240 then the next step is to place the children in their appropriate grid area now because I have all the children laid out in a logical order I'm going to use enth child to select them but you could definitely use your own custom class names here as well the important thing to notice is that we're applying grid area a to this element no matter where it sits in the container it will take up that grid template area you defined above now we'll repeat this process for every single area in the grid the end result is this grid with all the children in the appropriate spots and now how do we impress our friends with this fancy staggered intro animation well the first thing I'm going to do is set up a variable for the staggered delay this will allow us to change the timing without having to manually update the delay for all thirteen elements next we're going to need a keyframes animation if you're not familiar with keyframes they basically allow you to move from one set of properties to another from as the starting point to is the ending point we want to start with an opacity of zero or invisible a scale of zero point three and then we'll also rotate the color by a hundred and eighty degrees that's how I create that rainbow-like color change when the items are animated in when the animation is complete the opacity should be 1 the scale should be 1 and the heat rotate should be 0 now CSS will automatically interpolate between the starting and ending values based on the amount of time that we specify for the animation we can apply this animation to all the cards by setting it as the animation name then we'll also give it a duration of 700 milliseconds and a timing function of ease out now one last important point here is that we also need to set the animation film mode to backwards this will set the elements to their first keyframe value which in our case will be invisible otherwise the cards would be visible before the animation starts and that just wouldn't look right at all that takes care of the animation but now we want to stagger it and we can do that by setting an animation delay on each individual element but we want to do this in a smart way so if we decide to change the delay we don't have to update all 13 items to help us I'm going to use the CSS calc function it can perform basic calculations on numeric values for the first item we'll say 1 times the stagger delay for the second item we'll say 2 times the stagger delay and we'll keep increasing that for all 13 items and there's still obviously a lot of code duplicate here but you could make this much more efficient by using something like SAS where you can run a programmatic for loop and that's basically all there is to it we now have this unique animated grid without any JavaScript or external CSS framework I'm gonna go ahead and wrap things up there if this video helped you please like and subscribe and make sure to grab the full source code on fire ship IO thanks for watching and I will see you in the next one [Music]

Channel: Fireship

Views: 272,755

Keywords: webdev, app development, lesson, tutorial, css grid, css, css tutorial, css grid tutorial, css grid basics, css grid project

Id: 705XCEruZFs

Length: 11min 37sec (697 seconds)

Published: Tue Mar 10 2020