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