Positioning Elements by Lines 5 exercises

Positioning Across Multiple Rows & Columns with Span

Currently the pink box is positioned in the top left corner of the grid.

We want it to look like this:


Loading solution


0:00 Let's get to work. We're going to move this over. Let's go in the column direction first. Right now, it starts on column line one. I want it to start on column line one, two, three. Let's set grid column, start, on the pink box to be line three. That moves it over.

0:20 Now, what about where it ends, right? It doesn't end at this line. It ends at this line, which would be column line five. Let's set our grid column end to be five. Meaning, it should now span across two columns as it does right there.

0:37 On the row direction, the row start currently is line one. I want it to start on line two. Let's set grid row, start, to two. That moves it down. Then we need it to end. If this is one, two, three, four, five, on line five. Grid row and five. This is our version. This is the solution we're trying to recreate. Perfect.

1:08 That's using grid column, start, and end and grid row, start, and end to move something around, but not just move it as a single little tiny box, but also grow it across multiple grid tracks, multiple columns, and multiple rows.