This exercises incorporates CSS grid and introduces how to use the Firefox Grid Inspector.
- [Instructor] Grid makes it simple to create columns. So let's apply this to our work experience section to align the job detail blocks into two columns per job listing. Here's how it looks in the final project example. Let's go to our text editor and look at the HTML structure. All the job items are currently contained within the work experience area. Right now the content wrap div contains all of the job items. Each job item is contained within a section tag. This can be the grid container. We also want two columns within the job items so we'll split the content into two separate boxes. So let's start by adding a class to the section element. I'm going to call it job-item. Then we'll use divs to split the content into two boxes. I'm going to add the job title, company name and date into one box and call it job-details. So I'll cut these three items and paste them in between the div tags. The rest of the content can go into a second box. I'm going to call this one job-summary. Job dash summary. And I'll move the rest of this content into the second box. We should also add these updates to the other job items as well. So, I'll add the class into my second job item and also create the two columns. And finally, the last job item. Two columns here as well. Div job-details. And one more column, job-summary. Let's save that file. Now that the HTML structure is set up let's define the grid container. Switch over to our CSS file and we'll create a new declaration block. Let's go down to the work experience area and add our new job item class. This is going to be our grid container so here is where we will set the display to grid. We want to create two columns so let's use the grid template columns property with two values. I'm going to set mine to 1FR and 2FR. I'm using FR so these columns can be flexible. And I'm using 1FR for the first column because I want it to be smaller than the second column. So this means that my second column is going to be twice the size of the first one. So let's save this file and check the updates in the browser. I'll go back to my current project and refresh the page and there are my two columns. Right now my content just happens to line up with a little bit of space in between the columns. But if I had some more characters in any of these text blocks it'll run right up to the edge of the second column. We should add a gutter to ensure that there will always be a space between the two columns. Before we add the column gap property I'm going to open up Firefox's developer tools. You can inspect the grid properties with other browsers but Firefox has a grid inspector tool that includes some useful visualizations. Let's take a look. In the left HTML panel, next to the section tag where we added the job item class, we can see that it's been marked with the grid label. Click on it to see the corresponding CSS. In the other browser tools you'll be able to see the CSS apply to these elements just like in this middle panel here. But if we click on this grid icon it will toggle the grid highlighter. Click on it again to remove the highlighter. You can also select it from this third panel to see the visualization of the grid. Right now I have three grids. If I check them all then I'll see the visualizations for all three of them. Let me just resize the tool a bit so we could see a bit more of the visualization in the browser. There are also additional grid display settings. If I select display line numbers then I'll see the line numbers of my grid. There's also another option to display grid area names but we haven't specified any so we won't see anything here. And then the third option just extends the lines of the visualization. We can also update the CSS right in the tool. This is super handy for testing. The grid inspector is only available in Firefox but the ability to edit CSS in the dev tool is available in other browsers. For example, you may want to experiment with the column sizes. You can test out different values here to see how it'll look without actually changing your CSS file. Let's try changing it to 2FR and 3FR instead. Let me just uncheck these display settings for a second so that we can see the changes a little bit more clearly. So just note whatever you put into these dev tools it doesn't actually save these changes to your files. So if you refresh the browser it will reset back to your current CSS settings. We can also add CSS properties here. So let's try adding the column gap property so we can test out some values and also see it in the visualization. Just click into the box and type in the property name, in this case it's column-gap, and then press tab once to add the value. Let's try 20 pixels. Now we can see our gutter space. I don't mind using a fixed unit for the gutter space because I don't necessarily need this to be relative to its container. I always want there to be 20 pixels of space between the columns. So let's close the tool to see how the page looks without the lines. Don't forget to actually add this style in to your CSS file. Whatever we add in the tool here gets reset once the browser is refreshed. Lets go back to our CSS file and add that in now. Column-gap 20 pixels. And save the file. And let's go back to the browser and check for those changes. You may have noticed that my column widths just jumped a little bit. That's because we were experimenting with the FR values in the dev tools. But I've just refreshed my page so now it's going back to the 1FR and 2FR that I set in my CSS file. We could have created this whole page layout using Flex Box for grid but it's also common to combine these different layout methods in one page. I know I've probably said this several times already but there are often many ways to do the same thing and while there are best practices every project is a little bit different. It takes time, experience, practice and often some rewriting to figure out what works best for the particular problem you're trying to solve at that time. This is all part of the process.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts