Responsive Grid Layout using FlexBox, HTML & CSS

Summary

Learn how to use Flexbox by building a response grid layout that displays the most popular articles published on NumericaIdeas (https://numericaideas.com) as of 10 October 2023 ✅

Nowadays, front-end frameworks simplify the creation of Grids, but it remains a good thing to know in case you may need to do some customizations or to quickly understand what these frameworks do, plus this can be put on the table during job interviews.

Source code: https://github.com/numerica-ideas/community/tree/master/web/ni-grid-content

Chapters

  • 00:00 – Context
  • 01:59 – Plan the Work
  • 03:56 – Structure of the Page
  • 08:52 – Card Design
  • 15:15 – Google Font Integration
  • 20:42 – Add other Cards
  • 26:53 – Grid Layout
  • 34:57 – Design Improvements
  • 46:31 – Badge Element
  • 50:02 – Card Animation
  • 53:29 – Responsive Design
  • 58:17 – End Result
  • 58:52 – Conclusion
author-avatar

About Orleando Dassi

I'm a Solutions Architect with 10 years of experience who is constantly learning while impacting the community by producing technical articles/videos, building projects, and conducting tech mentoring/coaching sessions. What describes me the most is my flexibility. Follow me on Twitter and LinkedIn.