Submitted over 1 year ago

Responsive 3 column layout using grid

sleeepyskies• 150

@sleeepyskies

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Overall I enjoyed this challenge.

I had some struggles using grid for the layout. Initially, I had set 2 grid columns, but couldn't convert these to rows using a media query, so I changed to grid-template-areas.

I also had to fiddle around with the buttons, as upon resizing the browser they wouldn't always be level with each other, so I ended up setting the container positions to relative, and setting the buttons postions to absolute. To avoid the buttons and paragraphs from overlapping, I had to set a largin margin-bottom for the p elements.

Are there better ways to deal with these issues? Does my solution go against best-practice?

Any feedback is much appreciated!

Community feedback

Szabolcs• 330

@Szabolcs-Zeg

Posted over 1 year ago

Dear Sleeepyskies! First of all, congratulations on the solution. You can set the grid with the grid-template-column: 1fr 1fr 1fr; property on desktop. (or repeat(3,1fr) ) In mobile view, only the grid is enough. I think the margin is a good solution for placing the buttons here. I would use the min-height property in a real environment (where the length of the texts may differ slightly). (Here approx. 22em can be good.) One more thing: it might be worth setting the value of the media query to more than 600px. Around 650px it looks pretty weird. But all in all, congratulations again! Your solution is absolutely right!

Marked as helpful

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