CSS Grid
This is the css code for the
learn-more
section element
then inside a media query I do this
My problem is that only the first 2 elements of the grid get some extra space at the bottom idk from where, but the rest of the elements fit perfectly like the third element in the pic![No description](https://answer-overflow-discord-attachments.s3.amazonaws.com/1230251731137331241/Screenshot_49.png)
18 Replies
![No description](https://answer-overflow-discord-attachments.s3.amazonaws.com/1230252062688678009/Screenshot_50.png)
![No description](https://answer-overflow-discord-attachments.s3.amazonaws.com/1230252063242457229/Screenshot_51.png)
It's so weird because there's no margin set either
grid-template-rows: repeat(3, 1fr);
<-- this is why
1fr
is the same for everything
if you don't want the weird sizing, remove the grid-template-rows
@ἔρως I don't think that's it
![No description](https://answer-overflow-discord-attachments.s3.amazonaws.com/1230286903983738940/Screenshot_52.png)
See these two are different heights yet the content fits perfectly
but only the first two grid items get extra space
well, then i need to see it for myself
u need live server btw
codepen, please
full code?
just enough to be reproducible
as described in #how-to-ask-good-questions
i was right!
![No description](https://answer-overflow-discord-attachments.s3.amazonaws.com/1230289046064992256/image.png)
you declared 3 rows with 1fr of height
and that's it
all other rows have
grid-auto-rows: auto
and auto is probably being calculated as min-content
notice how the first 3 automatically calculated to 225pxaha
i don't even know why you have that set, honestly
just remove that line and all your issues are gone
ye that fixed it
thx
you're welcome