Gallery Grid Layout – implicit grid rows

Bernardo Belloto

Bernardo… Who was he? What did he know?

Now we know… they are among us.

.grid-layout {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr);
  grid-row-auto: 1fr;
  grid-gap: 0.5em;
  grid-auto-flow: dense;
.grid-layout .grid-layout__item:nth-child(even) {
  grid-column: span 2;
  grid-column: span 2;

The columns of the gallery layout are arranged using an explicit grid, while the rows are built with an implicit grid so that the layout is not constrained to a fixed number of pictures. The auto-fill keyword in the grid-template-columns property instructs the browser to place as many tracks as possible onto the grid. Additionally, the dense value in the grid-auto-flow property allows items to fill gaps in the grid, even if it changes the order of the items.