Submitted about 3 years ago

HTML AND CSS GRID

Kurt Gonzales•300

@KurtGonzales

Preview site View code

This is a solution for...3-column preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

The grid-gap is not working on my media queries so I adjusted the gap with the use of margins. Any feedback will be appreciated. Thank you everyone. Here is my code: .column-1 { height: 80vh; margin-left: 77px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }

.column-2 {
    height: 80vh;
}

.column-3 {
    height: 80vh;
    margin-left: -77px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

Community feedback

Jose Berrios•215
@surphuryPosted about 3 years ago
Try with gap:20px;
Marked as helpful
0
Kurt Gonzales•300
@KurtGonzalesPosted about 3 years ago
@surphury Thank you for that. I will try it.
0
Jose Berrios•215
@surphuryPosted about 3 years ago
@KurtGonzales gap is the shorthand for column-gap and row-gap and It can be used in grid and flex... I think you actually can't use grid-gap because it's the obsolete one... Basically grid-gap no longer exists. I hope this help you.
0
Katie•405
@kem522Posted about 3 years ago
Nice solution!

I'm not sure where you were trying to put the grid-gap but I got it working in the browser by adding grid-gap to the .columns class inside the media query. Grid gap should always be applied to the parent element of the grid components, that is to say the same element that you add display: grid; to.

Hope that helps!
Marked as helpful
0
Kurt Gonzales•300
@KurtGonzalesPosted about 3 years ago
@kem522 Thank you for this!
0
Mojtaba Mosavi•3,760
@MojtabaMosaviPosted about 3 years ago
On the mobile view the content is squashed, in my opinion it's better if you only set a max-width on the container and center it horisontally instead of setting width on each column.

Keep coding :=)
Marked as helpful
0
Kurt Gonzales•300
@KurtGonzalesPosted about 3 years ago
@MojtabaMosavi Thank you for your feedback!
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord