Building Layouts with the CSS Grid

Course Overview
Hi everyone. My name is Gary Simon, and welcome to my course, Building Layouts with the CSS Grid. I've been a freelance designer and developer for the last 15 years, and I've worked with countless clients on a wide variety of projects. Over the last couple decades, the way we build layouts with CSS has changed quite drastically. The CSS Grid is the latest attempt at solving some of the problems designers face when building layouts. Fortunately, they really got it right this time. In this course, you're going to discover that the new CSS Grid is versatile and easy when it comes to building layouts. Some of the major topics that we will cover include an introduction to the CSS Grid, understanding Grid basics like creating columns and rows, CSS Grid alignment, responsive CSS Grids, and much more. By the end of the course, you will have great confidence going forward when using the CSS Grid to build layouts. I hope you'll join me on this journey to building layouts with the CSS Grid at Pluralsight.

Responsive CSS Grid
In this module, we're going to focus on making our layout responsive. This will involve using media queries and adjusting our rulesets to ensure that this layout works well on both tablets, smartphones, and also other mobile devices. Before we begin, I thought it would be worth covering exactly what responsive design is, along with media queries, just in case you're new to all of this. But if you already understand responsive design and how to work with these media queries, you can move onto the next lesson. Put simply, responsive design is the process of making your layout look good and work well on all devices, not just a desktop. This is achieved primarily through CSS media queries. They allow you to declare and redeclare rulesets for specific viewports. For instance, this media query would allow you to define rulesets that would only work if the viewport or the width of the screen or device was equal to or less than 40em units, which is around the size of a smartphone. It's common practice to use multiple media queries to define rulesets for commonly used devices, such as tablets, computers, and even large 4K-resolution desktops. Inside of these media queries is where we will redefine some elements of the CSS Grid that we've already defined. This will include redefining our grid-template-rows and columns, as well as grid-template-areas and a lot more. It's actually really fun, and you will find that you have a tremendous amount of flexibility and power, especially because the CSS Grid mixed with media queries allows you to alter your layout in such a way that was never before possible. So in the next lesson, we're going to get started with this process.

Conclusion
Congratulations on making it to the end of this course. Let's do a quick recap of everything you've learned so far. First, you define a grid on a parent container by using the display property and setting the value to either grid or inline grid. Next, the rows and columns inside of it are referred to as child items, and you define those rows and columns with the grid-template- rows and grid-template-columns properties. The units you can use for these are fixed units such as pixels and flexible units such as percentages or fractions. You can adjust the space between rows and columns by using these properties, grid-column-gap, grid-row-gap, or the shorthand property, grid-gap. Now for aligning grid items along the row axis, you can use these two properties: justify-items, which aligns all of the rows, and justify-self, which aligns a single row. For aligning grid items on a column axis, you use the align-items and align-self properties. Now all four of these properties accept the same potential values of start, end, center, and stretch. For the times in which you need to align the entire grid itself, you use the justify-content property for aligning on the row axis and the align-content property to align the grid on the column axis. Both of these properties accept the same potential values of start, end, center, and stretch and space-between, space-around, and space-evenly. Finally, we discovered how to make our CSS Grid responsive by utilizing the power of media queries and adjusting our grid properties to drastically alter our layout. I hope you learned a lot throughout this course, and I will see you next time.