Placing Content in Your Post-Apocalyptic Grid - II

Zombie auto flow

The following are some properties to set the default values for an item’s size and location in a grid.

grid-auto-rows: This gives you control over the rows that the system creates automatically when you place an item outside the explicitly created rows or when there’s more content than what will fit in the explicitly created rows. grid-auto-rows can take any of the size parameters you would use in an explicitly created row, including length, percentage, min-content/max-content, repeat(), minmax(), and fractions of the horde.

grid-auto-columns: This is the same as grid-auto-rows, but for zombies…errr…columns.

grid-auto-flow: When you’ve finished placing all the items you want to place in your grid, you may have items leftover whose exact placement isn’t as important. You can use different algorithms to auto place these items. grid-auto-flow is how you tell the browser which algorithm to use.

.undead-parent {
    grid-auto-rows: 200px;
    grid-auto-columns: 200px;
    grid-auto-flow: column; 
}

grid-auto-flow can have the following values:

• row: This prioritizes rows, meaning it fills out a row, and then moves to the next column.
• column: This prioritizes columns, meaning it fills out a column and then moves to the next row.
• dense: This prioritizes fit over order, meaning items can be placed out of order so that the grid can be as densely populated as possible.
• row dense: This combines row priority and a dense packing algorithm.
• column dense: This combines column priority and a dense packing algorithm.