How I Developed the Nintendo Switch Game Store UI using CSS Grid

I am taking courses about CSS Grid via Kevin Powell Web Responsive Design Bootcamp at Scrimba.com.

After several lessons, I thought of maybe I can re-create some real websites that I have been visiting using what I have learned.

It just happened that I bought a Nintendo Switch and came across this Game Store UI and I think I could try to develop this using the CSS Grid I have just learned.

This UI is developed using technologies

• HTML
• SCSS (Inheritance, Nesting)
• CSS Grid (Mainly Grid Area)
• React

Feel free to give feedback.

Thanks for reading.

Comments

[James Thomson]

Nicely done, works great responsively. My only suggestion would be to place the :hover/:focus on the grid-item-container so that the background effect doesn't un-trigger when hover over text.

.grid-item-container {
    position: relative;
    overflow: hidden;

    &:hover .grid-item, &:focus .grid-item {
      transform: scale(1.08);  
    }
  }

Updated Codepen: codepen.io/getreworked/pen/zYGWBde

[Aleksandr Hovhannisyan]

Two more suggestions to match the original:

• Use cursor: pointer on the container.
• Add a title attribute to each card.

[Tek Loon]

Thanks for the feeedback

[Tek Loon]

Thanks for the feedback.

[David Ojeda]

It looks great! I've never seen the % sign in SCSS before:

%pre-purchase-item {
    @extend %grid-item;
    height: 270px;
    font-size: 1.2rem;
  }

Just read about it in the SASS docs. Every day is a new opportunity to learn 👏🏼

[Phuoc Thanh]

This is awesome! Keep going !

[Kayley]

I love this so much! Great work!

[superern]

For those who are looking.

youtube.com/watch?v=plRcoRqLriw&li...

[Swastik Baranwal]

Amazing!