Assume you have a 5x5 grid in CSS. There are items spanning different sizes, but no fixed to any specific position.

🤩 For such cases, using a "dense" mode for grid-auto-flow property allows you to "fill in the gaps" created by previous elements, by pushing latter elements that fit into the gap

🖼 This could be helpful for things like an image gallery, where you have random sizes of elements

📁 Sample code snippet:

.grid {
 grid-template-rows: repeat(5, 10rem);
 grid-template-columns: repeat(5, 10rem);
}

.item-2 {
 grid-row-end: span 2;
 grid-column-end: span 2;
}