| Interactive Media Design

Grid Auto Placement

Preamble

Earlier in the module we explicitly place items through the use of grid-column , grid-row and grid-area. CSS Grid offers a method to control the placement of grid items automatically.

By default, grid items will be laid out by row. If rows have been defined using grid-template-rows, then grid will continue to place items in these rows. Otherwise, rows are implicitly created and by default will accommodate the size of the content.

Controlling the behavior of auto placement is accomplished with the grid-auto-columns, grid-auto-rows and grid-auto-flow properties.

grid-auto-flow

This controls the direction of the auto-placement algorithm. Essentially the main-axis. The values available are row, column and dense.

row and column are self explanatory but dense is new. This is a packing algorithm that will attempt to fill in any gaps that appear in the grid by taking items out of the existing DOM order and place them in gaps earlier in the grid.

Example

A simple declaration:

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

Adding the dense value:

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}

grid-auto-rows and grid-auto-columns

These properties set the size of implicitly created rows or columns. It will accept absolute sizing values, fr, auto , minmax() and a few others.

Example

This example will set implicitly created rows to a height of 200px

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;

  grid-auto-rows: 200px;
}

This example will set implicitly created rows to a minimum height of 200px and a maximum height to the item with the most content

.grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;

  grid-auto-rows: minmax(200px, auto);
}

Further Review

References