Piper's next less will be CSS Grids. With the addition of Flexbox and Grid to the standards, website layouts have come a long way. Gone are the days of Photoshop slicing. Gone are the days of needing Bootstrap and other bloated layout frameworks. After this lesson Piper should finally have enough tools in her tool-belt to tackle her first website.

Piper's Notes

To turn any HTML element into a grid container set the display property to grid.

.mainContent {
  display: grid;

<main id="mainContent"></main>

Once you set the display property to grid you need to define the grid structure. To add columns use grid-template-columns. To add rows use grid-template-rows.

There are multiple units you can use to layout grids

Unit Definition
fr sets column or rown to a fraction of the space
auto sets the column or row to the width or height of its content automatically
% adjusts the column or row to the percent width of its container

grid-column-gap and grid-row-gap properties are used to set the space between columns and rows.

Using grid to control spacing. Use grid-column to control the amount of columns an item will use. Use grid-row to control the amount of rows an item will use. n CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the justify-self property on a grid item.

Value Definition
justify-self: start; aligns content to the left of the cell
justify-self: center; aligns content to the center of the cell
justify-self: end: aligns content to the right of the cell