Use CSS Grid to create an asymmetric promo grid

Use grid-template to make your CSS Grid declarations more readable

Create and Optimize an Asymmetric Promotional Grid with CSS 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.

Bryan Robinson: [0:01] In this demo, we have an asymmetric promo grid on the left-hand side. You can see we have one large promo on the left and then progressively smaller promotional spaces on the right-hand side.

[0:11] In our HTML, all we have is a section class banner and within that section we have our four promos, each with is an anchor tag with the class of promo.

[0:20] In our CSS we already have declared our grid styles. We have a display: grid, columns, rows and gap, as well as placing those first two items along the grid row and column lines we want them to follow within.

[0:33] In this demo we're going to refactor this into one simple declaration for our grid template called grid-template. Inside our grid-template declaration we're going to define out our grid area names, our rows and our columns all combined. In this case, our grid areas should be named "main second second" for our first row. Then we're going to take that first template row we have above and put it here minmax(30vh, 1fr).

[1:06] Then, we're going to take another line. We're going to line this up for easy readability. We're going to say the first area in this is going to be main. The next area will be called third. Then, ignoring the additional whitespace, we'll have our last area be named fourth. We'll also declare the minmax value for this row as well.

[1:27] Following that, we'll provide a /. That will tell the browser that we're now going to be defining our columns. We'll line our columns up underneath and then define out that same template column we have above, 2fr 1fr, and then again keeping these in line with their column names. We'll provide all those lined up.

[1:48] We can delete our grid-template-rows and grid-template-columns and leave it just as our grid-template. Next, we can remove our column and row declarations and provide just a grid-area declaration for each.

[2:02] In this case, the first child will go into grid-area: main, and the second child will go into grid-area: second. Now that we've refactored, the grid-template property will be a visual reference in our code to what the front-end will look like as well.

[2:20] If we change our second column from 1fr to 2fr, we can see that it will affect the second and third areas on our grid-template. For now, we'll keep it where it was, with 1fr.

[2:34] We refactored our banner area to have one property for our columns, rows, grid-area names and then refactored each of those children into a main and second named area.

Course

Create and Optimize an Asymmetric Promotional Grid with CSS Grid

Use grid-template to make your CSS Grid declarations more readable

Share this video with your friends