Frontend Mentor - Bento grid solution

This is a solution to the Bento grid challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Bento grid solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Desktop View
      • Mobile View
    • Links
  • My process
    • Built with
    • What I learned
    • Useful resources

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size

Screenshot

Desktop View

Mobile View

Links

• Solution URL: https://www.frontendmentor.io/solutions/bento-grid-challenge-using-vanilla-html-and-css-BEdpwRdjkx
• Live Site URL: https://kewlinnn.github.io/bento-grid/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

Working on this project reinforced my understanding of CSS Grid and its versatility in creating complex layouts. Here's an example of a key takeaway:

.grid-container {
  display: grid;
  grid-template-areas:
    "A B B C"
    "A D E C"
    "F D E C"
    "F G H H";
  grid-template-columns: 20% 30% 30% 20%;
  gap: 20px;
  grid-template-rows: auto;
}

This structure allowed for a dynamic, responsive grid layout that adapts to various screen sizes.

Useful resources

• MDN Web Docs - CSS Grid Layout - A comprehensive guide to mastering CSS Grid.