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

Four card feature - CSS Grid

nicolasdsa 125

@nicolasdsa

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, any feedback is welcome .Thanks to everyone who helped me with my previous solutions. I had a little difficulty with the media queries but I believe it was satisfactory

Community feedback

P
Patrick 14,285

@palgramming

Posted

it looks good but is seems the desktop layout could use a little grid gap cause it starts to overlap as it shrinks to that 1000px media query

nice use of grid for your whole layout though and when you use grid areas in your cards I am pretty sure you do not need touse the GTC or the GTR information that you have below your grid area info

good job so far

1

nicolasdsa 125

@nicolasdsa

Posted

Oh, a thousand apologies for not having responded before, I had not seen the notification in the email, thank you very much for the comment and the tip, I'll fix it soon. About the grid template area, it's necessary to use GTC and GTR in this case because what the "grid template area" does is define the columns and lines size based on their content size and not by splitting the area in fractions as I did, I may be wrong but that's what I noticed trying and searching the internet

1
P
Patrick 14,285

@palgramming

Posted

@nicolasdsa Yes I need to look into it also I might be wrong as well cause I tried something the other day and it did not work so I gave up and moved back to flex... So much to learn and to learn how to apply correctly

1
nicolasdsa 125

@nicolasdsa

Posted

@palgramming practicing and learning, every day in this world of development. i have to admit that css grid is my favorite. Again, thanks for the tips and sorry if my english is not good, it is not my native language.

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