Skip to content
Submitted over 1 year ago

3 Column preview card using css grid

2trill2code•70
@2trill2code
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

  • Is there a way to let the 3rd column take 2 columns of space on a medium screen using a CSS grid?
  • Is there another way to make the columns take more height without explicitly using a property of height?

I appreciate your feedback

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Lukáš Říha•225
    @lukasriha

    Hi 2trill2code!

    Yes you can use grid-column. You can check out this article on mdn!

    If you don't set the height specifically, then the height is set by the content.

    Usually it is not a very good practice to set the height of elements specifically - if you decide to make the content longer, the text might not fit anymore :)

    If the height of your project does not fit the design, then maybe you have overlooked something. Check out your top + bottom margins and paddings, font-sizes and line-heights.

    Happy hacking! :)

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