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

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

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

Screenshot

Links

• Solution URL: https://github.com/mdismail13/bento-grid.git
• Live Site URL: https://mdismail13.github.io/bento-grid/

My process

Built with

• HTML5
• CSS Grid
• Responsive design
• Mobile-first workflow

What I learned

I learned how to build a responsive bento-style layout using CSS Grid. Instead of using grid-template-areas, I manually positioned each section using grid-column and grid-row. This helped me understand how to place items exactly where I want in a grid layout.

.container-box{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    min-height: 100vh;
    margin-block: 4rem;
}
.container-1{
    grid-row: 1/4;
    display: grid;
    gap: 1.5rem;
}

Continued Development

I will work on advanced CSS next to further improve my styling skills.
Future plans include exploring CSS animations, transitions, flexbox and grid in more depth, and learning CSS preprocessors like SASS or LESS to write more maintainable styles.

Useful Resources

• MDN Web Docs - CSS — Comprehensive documentation and tutorials on CSS.
• CSS-Tricks — Articles, tips, and techniques for CSS.
• Frontend Mentor — Great platform to practice real-world frontend projects.
• W3Schools CSS Tutorial — Beginner-friendly CSS tutorials.
• A Complete Guide to Flexbox — Detailed flexbox guide.
• A Complete Guide to Grid — Detailed CSS Grid guide.

Author

• Name - Md. Ismail
• Frontend Mentor - @mdismail13
• GitHub - mdismail13
• Facebook - Ismail H. Emon

Acknowledgments

I would like to thank Frontend Mentor for providing this challenge, which helped me improve my CSS and layout skills.
Thanks to the open-source community for their helpful tutorials and resources.
Special thanks to anyone who reviews my code and provides valuable feedback.