When There Are More Elements Than Cells

What happens if you created a grid for 4 cells, but 10 elements arrived in HTML? The magic of Implicit Grid activates.

1. Auto-placement Algorithm

Browser will create new rows or columns itself to accommodate " extra " elements.

2. Controlling the " Implicit " World

You can tell browser in advance what height these extra rows should be:

.container {
  grid-auto-rows: 100px; /* All rows browser creates itself will be 100px */
}

3. Flow Direction

The grid-auto-flow property (default row) tells where to add elements: down (rows) or sideways (columns).