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 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.

Bryan Robinson: [0:00] To create our grid, we're going to have a section class banner and then four anchor tags within that to create the promotional spaces we need.

[0:09] For our CSS, as you can see, we have some additional styles that aren't related to our grid. They mainly handle background images, colors, and font sizing.

[0:18] From here, we'll construct our grid inside of our banner class selector. To do this, first of all, start with a display colon grid setting to change our context from a block context to a grid context.

[0:31] Then we need to define out our grid-template-columns. In this case, we're going to set up three columns of different sizes using the fractional space unit in CSS. You can see here we have a 2fr, 1fr, 1fr. The left column will be twice as big as the two columns on the right.

[0:48] Next, we need to set up our rows using the grid-template-rows property. In this case, we're going to set up two evenly sized rows using the minmax() function. In this case, we're going to set a minimum size of about 30vh, and a maximum size of 1fr, allowing our rows to grow at the same rate.

[1:06] Next, we'll give ourselves a little bit of gap in between each of our rows and columns using the grid-gap property, and we'll set that to about 1rem of space in between both rows and columns.

[1:17] Next, we need to explicitly place our elements where we want them to go in our grid. In this case, we'll use promo:first-child to grab the first element in our banner group, and then we'll explicitly place it on two different grid rows by saying grid-row span 2.

[1:36] We can also explicitly place the element along the grid column lines as well by telling it grid-column span from 1 / 2, grid-column line 1 to grid-column line 2.

[1:48] We'll do the same thing with our promo second child, promo:nth-child(2). This time instead of setting the row, we'll set the column, and we'll set this to span from grid-column line 2 to line 4, to have it span those next two columns on the right-hand side. Now, we have an asymmetric promotional space using CSS Grid.

[2:10] We set a display context of grid on the banner class, we set up our columns and our rows and defined the asymmetry directly into that definition, and then placed our first and second child along the grid-column and row lines that we wanted those elements to be on.

Course

Create and Optimize an Asymmetric Promotional Grid with CSS Grid

Use CSS Grid to create an asymmetric promo grid

Share this video with your friends