Tek Loon

Posted on Mar 12, 2020

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

#codepen #css #react #webdev

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.

Top comments (9)

James Thomson • Mar 13 '20

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 • Mar 13 '20

Two more suggestions to match the original:

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

Tek Loon • Mar 14 '20

Thanks for the feeedback

Tek Loon • Mar 14 '20

Thanks for the feedback.

David Ojeda • Mar 13 '20

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 • Mar 12 '20

This is awesome! Keep going !

Kayley • Mar 12 '20

I love this so much! Great work!

superern • Mar 14 '20

For those who are looking.

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

Swastik Baranwal • Mar 13 '20

Amazing!

DEV Community

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

Top comments (9)

Read next

React vs Angular vs Vue - What's the right framework for your project?

React Memo Mayhem: Optimizing Functional Components

Mastering Next.js 13/14 - Fundamentals

Mastering Next.js 13/14 - Advanced Techniques