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;
}
11 Replies
technically, scale(-1) will do that 🤣
and you then can scale(-1) the contents
in your case, maybe scale(-1, 1) or scale(1, -1) might be more accurate
A bit more of a hassle to get right but you could try with flex and
flex-wrap: wrap-reverse
A quick test got this to work:
I know this isn't actually answering the question, but why the specific need for that order as opposed to populating the grid from the top down with each episode in descending order?
Thank you for posting your comments.
the scale option is not working.
I'm trying to get the bottom to top result because I have grids one above the other (in different sections) and under the top-down order, there are gaps when the bottom row is not full.
Chris – If I understand you correctly, you’re suggesting to forget the CSS grid approach and go with flex. Is the solution you suggested responsive? The beauty with the CSS grid is that it works great on different devices (from 4 block in Desktop breakpoint to 1 block in a mobile breakpoint).
I deleted the image which was attached – is there a way to add it back? I added to correct illustration here (but not to the original post)
honestly, the scale was more of a joke than a serious one
but i second the question as to why you are doing this
or want to do it
Flex can be just as responsive, if not more, than grid.
You mentioned breakpoints so, assuming you are happy with using media (or container) queries you should be able to do this with flex.
Here is a quick test. https://codepen.io/cbolson/pen/QwWzEBd
Thank you Chris for making the effort and providing a quick test.
Since I’m a CSS novice, I’ll need some time to understand your code and to modify it to my needs.
Do I need to use a CSS class for each block (within the flex container)?
As you can see from my demo, I only placed a class on the parent container and then used the
.wrapper > div child selector to select the grid blocks. But that is how I personally like to work, I prefer to have to define as few class names as possible, especially when working with demos.
However you can define a class name for the blocks if that makes things simpler or clearer to understand, it may also be safer if this forms part of a larger project where the parent container classname may be used elsewhere.Thank you! I'll try to adjust your code to my needs.
I have just made a couple of changes and added some comments to help you a bit more.
I'll take a look. Thank you very much