Skip to content
Submitted over 3 years ago

Four card feature section master with CSS Grid en SASS

Carlos Guzman•285
@guztrillo
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I was capable to visualize the solution before starting to coding. Still, I always have the feeling that my solution isn't the right one. I mean, this works, but can we do this with less containers, for example?

Either way, I'm happy with the final result. I'm not quite sure about the box shadow color, but I did my best trying to match it up. On the other hand, the border top with the highlight color from the design looks straight and in my solution the boder top curves at the border of the container due the border-radius property. So I'd like to figure out how to do that.

If you have any suggestion about my solution I would be thankful.

Code

Please log in to post a comment

Log in

Community feedback

  • Gregg Christofferson•295
    @gchristofferson

    Hey @guztrillo! ✋

    Excellent job! Looks really good!

    I had a similar approach to the border-top as @markup-mitchell but instead of adding another level to the card markup, I opted for using the ::before pseudo-element. Thanks to @markup-mitchell codepen example, I figured out what was wrong with mine. I needed to add overflow: hidden to the card. Here's my example ->

    Marked as helpful
  • Mark Mitchell•1,820
    @markup-mitchell

    Oh, and I noticed that between 576px and 847px viewport width the layout "breaks" in a way I assume is unintended for this (broadly speaking) tablet range.

    It reflects well on your implementation choices that the layout still looks good and could conceivably be intentional!

    Marked as helpful
  • Mark Mitchell•1,820
    @markup-mitchell

    Hi Carlos,

    There's no single "right" solution and yours looks really good to me! The use of container elements looks very economical and the semantic elements and headings hierarchy looks good. You really went all-out with grid didn't you?! My instinct would have been to use flexbox more for the grid-items, but I'm not sure whether that would offer any advantages, really.

    For the top border I'd add another level to the card markup. Put the border on the inner element and the shadow and border radius on the outer element. demo.

    You might want to have a look at the order of your sass imports. By importing base third you end up with

    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0; }

    being declared some way down your outputted stylesheet... it doesn't seem to be causing a problem here, but it could easily do in a larger project. Your base styles probably want to be imported first and then overridden as your specificity increases.

    I'm not super familiar with sass, but I feel like you're not taking full advantage of its features? You could be nesting selectors like:

    .cards-header {
     display: grid;
     gap: 1rem;
     place-content: center;
     place-items: center;

     h1 {
          font-weight: 200;
          text-align: center;
          max-width: 30rem;
     }

     p {
          max-width: 32rem;
          text-align: center;
     }
}

    and using sass (or just css custom variables) to store common values. For example you have font-size: 15px in quite a few places, and for reasons of responsiveness and scaling that might better be expressed as a rem value.

    If you declared

    :root {
    --font-size--small: 15px;
}

    and set all the instances of font-size to font-size: var(--font-size--small) you could update the variable definition like so:

    :root {
    --font-size--small: 2rem;
}

    and it would update everywhere at once.

    I had to look really hard at your project to find these small suggestions... I hope I've made sense!

    Marked as helpful
  • Mark Mitchell•1,820
    @markup-mitchell

    My pleasure Carlos! I think the "tablet" layout looks cool too, but good luck convincing a UX designer 😂

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