Zelda: Breadth of the Wild with CSS (Part 2)

Dave Geddes created a detailed tutorial for how to build the foundation for the Inventory screen in Zelda: Breadth of the Wild using CSS Grids and Flexbox. The tutorial can be found here: https://gedd.ski/build/zelda/.

The end product of the tutorial is pictured below:

Dave mentions this exercise is meant to be Part (1/2) but I was unable to find Part 2 of the series. With the help of Dave’s foundation, I did my best to fill in the rest of the implementation details.

Here are the results:

What I learned

• CSS Grids are very useful for setting up the layout of a page.
• Many simple layouts can be achieved using Flexbox. Don’t reach for CSS Grids if you don’t have to.
• CSS Grids and Flexbox play very nicely together.
• Displaying the contents inside the grid can be achieved by both CSS Grids and Flexbox. Choose which tool you feel most comfortable with.