I have a responsive grid in which each item has its own details section, which is hidden by default. A click on the item adds a class to the details section to show it.
The HTML/CSS looks roughly like this:
<div class="grid">
<div class="item">Item 1</div>
<div class="details">Item 1 Details</div>
<!-- ... -->
<div class="item">Item n</div>
<div class="details">Item n Details</div>
</div>
.grid {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.item {
/* nothing relevant */
}
.details {
grid-column: 1 / -1;
max-height: 0;
padding: 0;
opacity: 0;
overflow: hidden;
}
.details.selected {
max-height: unset;
padding: 1rem 2rem;
opacity: 1;
}
The details span an entire row, and the dense auto-flow allows other items to fill the gaps.
This works well and looks great with enough items.
However, let's assume a width of 1000px, meaning 5 items can fit next to each other. If there are only 1 or 2 items, there is too much empty space to their right. I would like to center these items, but with this current CSS, the grid fills in empty cells. This seems to be caused by grid-column: 1/ -1.
So, this is how it currently looks with only 2 items:
This is how I would like it to look:
In both cases, with more than 5 items it would look like this, which is fine. I'd also be fine with the bottom row being centered too, in case there's a flex solution.
How can I achieve this behavior?
It doesn't need to be grid. Can be flex too, or really any other solution, if the dense behavior can be achieved with it.
Somewhat related question, not my focus right now, but would be nice to have:
I would like to add a fade effect to the details, which is why it uses padding, max-height and opacity instead of just setting it to display: none. If one item is selected and I select another item in the same row, both details containers are displayed for the transition duration, which causes weird shifts in the grid layout.
JS solutions would be okay. It doesn't need to be pure CSS.
