Submitted over 2 years ago

Responsive 3-Column Preview Card using grid-template-areas

bem

Matthew Millard•50

@matthew-millard

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

Is the correct way to center the component both horizontally and vertically as the contents are overflowing the viewport height? I set the top: 0; applied equal padding on both top and bottom and set translate(-50%, 0).

    position: absolute;
    top: 0;
    left:50%;
    transform: translate(-50%, 0%);
    padding: 2rem 0;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
    'sedans'
    'suvs'
    'luxury';
}```

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Matthew Millard's solution.

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