28 replies

CSS Grid

This is the css code for the

learn-more

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

KP-C

Kevin Powell - Community•2y ago•

28 replies

koop

CSS Grid

This is the css code for the

learn-more

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

CSS Grid

Similar Threads

CSS Grid

Similar Threads

Similar Threads

Similar Threads