CSS grid that's constrained vertically
Finding it pretty difficult to recreate this pattern tbh
Each image needs a fixed aspect ratio (easy enough), but as the grid grows the content should be constrained by the grid height and overflow/grow horizontally if it needs to.
Problem I've currently got is how the horizontal space is distributed between columns rn (2nd image)
Is this possible?
https://codepen.io/nwoodward/pen/MYgMKgX?editors=1010
25 Replies
I suspect that you are over defining columns, rows and, most importantly, heights.
You can't expect the content to both maintain the aspect-ratio and fill the whole viewport at the same time, especially if the viewport size changes (responsive).
I have forked your CodePen, cleaned out some of the unnecessary column and span definitions and removed the heights. However, I don't know it this is actually what you are after.
Hi Chris, thanks for taking a look.
So I've made a couple of examples to show what I'm after. Sorry I wasn't more clear in the OP
I'm basically pretty easy about the requirements, outside of the grid never overflowing the screen vertically and the fixed image ratio. If there's overflow horizontally at smaller sizes I'll just change the grid layout
What's that white-space beneath each image that gets proportionally bigger when the img increases in size?
edit: I believe
aspect-[238/153] on the div causes it. Shouldn't that be on the img or even removed?
Ah, good spot.
As you have a fixed aspect ratio on the cells this inevitably leads to different heights, espcially taking into account the grid gap.
I have now added
items-stretch (align-items: stretch;) to the parent to ensure that the cells occupy the full height. However this may cause the aspect-ratio to "break" slightly as the cell height is being forced.So right now your example expands and contracts with the width of the screen, with any overflow of the viewport being vertical.
I'm after the opposite if possible - I'd like the grid to expand and contract with the height of the screen, with any overflow of the viewport being horizontal (if you look at the examples with the red backgrounds, none of them overflow vertically)
------------------
My only issue with this demo (https://codepen.io/nwoodward/pen/mybZPpG?editors=1010) is that the horizontal space in the grid is not collapsing to fit the size of the content
I'm just trying to get rid of the gaps here in red
as the screen height gets shorter, the problem gets worse
hmm, without defining specific column widths I am not sure how you could do this 🤔
Whilst it might not be exactly the correct aspect, you could try adding
aspect-[238/153] to the parent container.
of course that won't work if you have more rows 🤔yeah that might be a way to do it - just eyeball the aspect
nah, the number of rows can be set manually, don't mind doing that
i'm just surprised there isn't a way to shrink the columns to fit the content?
like they're just evenly spaced here, but something like min-fit doesn't work
*w-fit
yeah I think this is it - the idea that if all the images are the same aspect ratio, the grid can just be given the same aspect ratio
https://codepen.io/nwoodward/pen/VYZJjdJ?editors=1010
*turns out it's just a fluke that this works 😄
if you had 0 gap, then you could use the aspect ratio for the grid
however, the gap makes the aspect ratio a variable, and it changes depending on the size of the screen
this is because the gap is an absolute size
gap-[2%]?
you have to take into account the gap anyways
but with percent it is a lot easier
aspect ratio does seem to be working in this example, even at different screen heights: https://codepen.io/nwoodward/pen/VYZJjdJ?editors=1010
although i'm struggling to apply it to my project, annoyingly
it will work for the images, and it may look like it is working for the grid, but it wont be correct
with a gap, the grid is no longer - say - 2:3
it's (2 + 2x gap):(3 + 2x gap)
i don't doubt it, but it definitely seems to work fine. maybe that's a quirk in FF 😄
thats because the difference is minuscule, but exists
you can see the tiny space on the right side
do you know why something like
auto-cols-min doesn't make the col size the same as the content? or have i completely misunderstood it?
on an example like this:
https://codepen.io/nwoodward/pen/MYgMpyq?editors=1010In my naive mind, all i have to do is get the col size to match the content width
auto-cols-min just completely collapses
do you have an height set?
not in pixels, but i can do in vh or %?
i wouldnt