Skip to content
Submitted almost 3 years ago

Equalizer Landing Page - Thoughtful approach to CSS grid

Rafal•1,395
@grizhlieCodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Equalizer landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I wanted to do another project that might make me think about CSS grid, this seemed like the perfect one that wouldn't take too long :)

Overall I always try thinking how I can make things responsive and looking as best as they can, on any viewport, with the smallest amount of code. The benefits of this approach are two-fold:

  1. The user experience overall is improved
  2. The readability of code is usually excellent. Usually. Or at least there isn't an overabundance of code that's not needed.

That's what i did here, I think? I was pondering on whether I should have set the widths/heights of my grid-children or if the approach I went with of mostly using the grid declarations to declare them made sense. In the end I'm not sure. Might have to make a case study of this in the future where I write this code in 2 different ways.

Anyway, cheers :)

Community feedback

  • Duyen Nguyen•950
    @Duyen-codesPosted almost 3 years ago

    Great job!

    Marked as helpful
    1
    Rafal•1,395
    @grizhlieCodesPosted almost 3 years ago

    @Duyen-codes Why thanks 😁 - I was just commenting on a solution of yours haha - fun coincidence.

    I'll be making a video for this solution end of the week (it's all about CSS-Grid), I think you might find it useful / interesting. (I love using grid 🤓)

    1

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