Row Dense and Column Dense Auto Flow
Understanding Grid Auto Flow: Row Dense and Column Dense
When working with the grid-auto-flow property, the two main options are row and column.
However, we also have row dense and column dense to consider.
To illustrate the difference between these options, let's move one of our boxe
Transcript
0:00 When working with the grid-auto-flow property, we have row and column as two options, but we also have row dense and column dense.
0:11 To illustrate the difference here, what I need to do is move one of my boxes somewhere else. Let's take our first box, the red one and maybe have it start over here. Without getting into grid template areas, I will use a line number here. I'm going to tell it its column start instead of being one is going to be three.
0:30 This is line three, one, two, three. I'll select it. I've given that element an ID of redbox again, redbox will have a grid-column-start of three. That moves it over to the top.
0:48 Notice the behavior of the auto-flow algorithm. The default value of row has our content starting from there, continuing on in flowing on the row below it, second, third, fourth, fifth and sixth. Leaving this gap up here. This gap is only here, because we don't have enough content to fill it.
1:06 Deliberately, this was left empty. It just continues after this element. Instead, if I want it to, I can set it to be grid-auto-flow of row dense, which is what it sounds like. It's going to flow in the row direction, but in a dense manner where it fills in as many gaps as possible.
1:25 It will start up here, where there was a gap, second, third. Here's our box that was placed here manually and it flows below fourth, fifth, and sixth. We also have column dense, which is basically the same concept. It just works in the column direction.
1:40 If I set grid-auto-flow to column and have the row-start for our redbox, be the line number three, we have these two empty spaces here. Then it flows from first, second, third, fourth, fifth, sixth in the column direction.
1:54 If I set it to column dense, it's the same behavior as it was with row dense, except in the column direction, where it packs in elements into the grid to fill those gaps, second, third, and then first. Then it continues to flow in the column direction, fourth, fifth, sixth, and so on.
2:12 That's using grid-auto-flow with the dense modifier keyword column dense and row dense.