The Implicit Grid 2 exercises

Change Grid Content Flow

Currently the grid is in the default row direction:

demo row

If we set the `grid-au

Loading solution


0:00 All right. What we need to do is change the direction, change how our content flows into the grid. Right now, the default is that it goes in a row direction. ONE, TWO, THREE, FOUR, FIVE, SIX, SEVEN, EIGHT.

0:13 Not only that it is a sparse row, we could instead set grid-auto-flow to be row dense, and you can see those gaps are filled as much as they can be. However, that is not what we're going for. This is a column direction. If you notice the order that the elements are in it's ONE, then TWO, then THREE, then FOUR, and then FIVE.

0:36 We also have EIGHT up here, but it's going in this top to bottom column direction. I'm going to set our direction to column, and let's see if that's right. Not quite. It's close, but we have these gaps, right? ONE, TWO, THREE, FOUR -- it's clearly going in a column -- FIVE, SIX, SEVEN, EIGHT. What we want is a dense column, and that's what this looks like.

1:00 That's all there was to this exercise, just understanding the difference between row and column and then sparse and dense. I don't know if sparse is the technical term, but just plain old row and column versus row dense and column dense.