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.
Gallery Grid Layout – implicit grid rows
Bernardo… Who was he? What did he know?
Now we know… they are among us.
![The Fortress of Königstein from the North](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-1.jpg)
![Łaba pomiędzy Pillnitz a Pirną](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-2.jpg)
![The Fortress of Königstein](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-8.jpg)
![Das kaiserliche Lustschloß Schloss Hof, Ansicht von Norden](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-3.jpg)
![Dresden vom linken Elbufer unterhalb der Festungswerke](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-9.jpg)
![Widok Warszawy z pałacem Ordynackim](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-4.jpg)
![Die Ruine Theben an der March](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-10.jpg)
![Capriccio z kasycznymi i sarożytnymi motywami oraz budynkami Drezena](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-5.jpg)
![Architektura fanastyczna z Chrystusem wypędzającym przekupniów ze świątyni](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-6.jpg)
![Widok Ujazdowa i Łazienek](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-7.jpg)
![Pałac w Wilanowie od strony wjazdu](https://majadc.com/nijanawia-content/uploads/2023/02/bernardo-belotto-11.jpg)
.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;
}