CSS Grid

This is the css code for the learn-more section element
.learn-more {
padding: 160px 10% 120px 10%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
row-gap: 100px;
column-gap: 40px;
}
.learn-more {
padding: 160px 10% 120px 10%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
row-gap: 100px;
column-gap: 40px;
}
then inside a media query I do this
@media only screen and (max-width: 768px) {
.learn-more {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width: 768px) {
.learn-more {
grid-template-columns: 1fr;
}
}
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
18 Replies
sos
sos3mo ago
No description
No description
sos
sos3mo ago
It's so weird because there's no margin set either
ἔρως
ἔρως3mo ago
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
sos
sos3mo ago
@ἔρως I don't think that's it
sos
sos3mo ago
No description
sos
sos3mo ago
See these two are different heights yet the content fits perfectly but only the first two grid items get extra space
ἔρως
ἔρως3mo ago
well, then i need to see it for myself
sos
sos3mo ago
u need live server btw
ἔρως
ἔρως3mo ago
codepen, please
sos
sos3mo ago
full code?
ἔρως
ἔρως3mo ago
just enough to be reproducible as described in #how-to-ask-good-questions
ἔρως
ἔρως3mo ago
i was right!
No description
ἔρως
ἔρως3mo ago
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 225px
sos
sos3mo ago
aha
ἔρως
ἔρως3mo ago
i don't even know why you have that set, honestly just remove that line and all your issues are gone
sos
sos3mo ago
ye that fixed it thx
ἔρως
ἔρως3mo ago
you're welcome