Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3-Column preview card using CSS Grid

Hugh 55

@hugh128

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I use CSS Grid to create the card with a fluid width columns that break into more or less columns as space is available. I used this to make it: grid-template-columns: repeat (auto-fit, minmax (250px, 1fr)).

That works great, but when the columns get smaller the paragraphs of the cards need more lines to fit in the width of the column causing the buttons to go down and, as not all the paragraphs of the cards have the same amount of words, the buttons go down at different points and they look misaligned when that happens.

I tried to solve it by subtracting the padding I gave the paragraphs so that the buttons are aligned again using media query at the points where the buttons are misaligned (at least up to a width greater than 862px). My question is: is there a way to solve this "problem", and if there is, what would be the best way to do it?

Edit: problem solved using absolute position on buttons. Thank you @yudiyoshida for your comment and suggestion.

Community feedback

@yudiyoshida

Posted

Wow, I didn't know about the minmax function! I'll try to use it on my next project :D

About your problem, I made the buttons 'position = absolute' and then positioned them with bottom = ""px (you can check my project if you have any doubt). It's important to set the article tags as relative, because absolute elements will only be positioned relative to an element that does not have a static position.

I hope I explained well, sorry about my english :p

1

Hugh 55

@hugh128

Posted

@yudiyoshida Wow !!! Thanks for your comment. Without a doubt I did not think about your solution, and it is true, with absolute position it can be solved. Thanks again and perfectly well explained.

I refer to this site: https://css-tricks.com/snippets/css/complete-guide-grid/ to find out how to create fluid width columns. Check out Part 6: Fluid columns snippet.

Greetings!!!

0

@yudiyoshida

Posted

@hugh128 Thank you so much for the link, I'll take a look to improve my grid techniques.

Keep coding! :D

0
Hugh 55

@hugh128

Posted

@yudiyoshida You're welcome, friend. Keep coding too!!! : )

1

Please log in to post a comment

Log in with GitHub
Discord logo

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