CSS grid – filling the grid bottom up
Any help will be greatly appreciated (either solving the problem, or telling me that it can’t be done).
I have a simple CSS grid (CSS class podcastgrid – see snippet below). The grid holds blocks, each block is an episode in a podcast.
When adding blocks to the grid, they fill the top row and only when it’s full ( 4 blocks in Desktop breakpoint), they start to fill the row bellow it (Please see Illustration 1 – current outcome).
I’m looking for a way to fill the grid bottom up – blocks fill the bottom row and then fill the row above it (Please see Illustration 2 – desired outcome).
If it can’t be achieved using CSS, is there a solution using JavaScript?
Thanks in advance for any answer.
.podcastgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-flow: dense;
width: 960px;
gap: 6rem;
}
I have a simple CSS grid (CSS class podcastgrid – see snippet below). The grid holds blocks, each block is an episode in a podcast.
When adding blocks to the grid, they fill the top row and only when it’s full ( 4 blocks in Desktop breakpoint), they start to fill the row bellow it (Please see Illustration 1 – current outcome).
I’m looking for a way to fill the grid bottom up – blocks fill the bottom row and then fill the row above it (Please see Illustration 2 – desired outcome).
If it can’t be achieved using CSS, is there a solution using JavaScript?
Thanks in advance for any answer.
.podcastgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
grid-auto-flow: dense;
width: 960px;
gap: 6rem;
}
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
