Submitted about 14 hours ago

Single Grid Card

Clyde Forland• 90

@clydehenry3

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

This is a solution for...

Single price grid component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am really proud of a couple things I did:

Knowing how I want to structure my project in my HTML
Using my CSS properties within a of MDN referencing
Using root for my colors
Learning grid.

What challenges did you encounter, and how did you overcome them?

Grid is completely new to me. I thought flexbox would be more complex of the two but I prefer flexbox all the way. Getting through this grid challenge, I watched a lot of videos to help me understand the components of grid.

What specific areas of your project would you like help with?

Is there a way to use grid and flexblox within the same div? In this project I had to manually space some things opposed to using flexbox syntax.

Any additional feedback is appreciated!

Community feedback

Huy Phan• 1,420

@huyphan2210

Posted about 6 hours ago

Hi, @clydehenry3

I'd like to attempt to answer your question about using Flexbox and Grid on the same div—or the same element:

Can you use Grid and Flexbox on the same element? No, you can't apply both layout systems directly to the same element at the same time.
Can you use Grid and Flexbox within the same element? Yes, as long as they are applied to different child elements. For example, you can use Grid on the parent container and Flexbox on its children.
For managing spacing within Grid or Flexbox, take a look at properties like gap, column-gap, row-gap, and also justify-content and align-items.

Hope this clarifies things!

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