6. Aligning & Justifying Items

 

align-items:  start or end or stretch 

justify-items:  start or end

 

justify-self

align-self

 

 

 

7. Create a 12-Column Grid

 

 

 

8. Mosaic Layout

 

 

9. Grid Areas

grid-template-area:

"header header header header"

"aside aside main main"

"nav nav main main"

"section section section section"

"section section section section"

"footer footer footer footer";

 

10. Responsive Grid Example

 

@media screen and (min-width: 760px)