Skip to content
Submitted about 2 months ago

Single Grid Card

Clyde Forland•90
@clydehenry3
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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•2,060
    @huyphan2210Posted about 2 months 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!

    0

Please log in to post a comment

Log in with GitHub

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