Cascading Style Sheets bring order and beauty to our applications.

Create an asymmetric promotional grid using CSS Grid. Then optimize it to make it much more readable for other devs (or your future self). 

- Future Lesson: Support older browsers

In this lesson, we'll create an asymmetric promotional area where our promos get progressively smaller. We'll use CSS Grid to keep our HTML to 6 semantic lines to make this work. We'll create our asymmetry directly in our grid definition and not in our HTML by using a combination of grid-template-columns and the fr unit in CSS.

Use CSS Grid to create an asymmetric promo grid

In this lesson, we'll look at refactoring an asymmetric promotional grid. We'll go from using a combination of grid-template-rows, grid-template-columns, grid-row, and grid-column to using the shorthand grid-template and grid-area properties.

Create and Optimize an Asymmetric Promotional Grid with CSS Grid

Bryan Robinson

Course Content