Positioning Elements by Lines 5 exercises

Practice Duplicating a Layout with Shorthand Properties and Span

In this exercise, you will practice using the span keyword to reposition elements in a CSS Grid layout.

We start with a 5x5 grid layout with a pink box, and a purple box:


Loading exercise


0:00 It's time for another exercise. This time you'll get some practice using span, the span keyword. Again, we have our 5x5 grid that I've pre-set up for us. This time we have two boxes, our good friend the pinkbox and purplebox. What I'd like you to do is recreate this layout here. Specifically, I'd like you to do it using the span keyword.

0:21 You can use many different ways of actually positioning the element, whether we're talking about grid-column-start and grid-column-end or the grid-column shorthand. However you want to do it, it doesn't matter, but I'd like you to use the span keyword.

0:35 This is our initial starting point. You don't need to touch the HTML, as always. In the CSS, all you need to touch is the pinkbox styles and the purplebox styles. Leave the grid itself alone. All right, so I'll leave you with this. This is what we're trying to recreate using the span keyword.