Complete Guide to CSS Flex and Grid

71 ratings

Become a Pro at building components & layouts with CSS Flexbox and Grid. Learn by looking at a curated list of 70+ real world use cases and examples. Gain access to Private CodePen links with working demos for all examples.

📖 Preview first 25 pages for free

"Don’t just learn all the things CSS flexbox and grid can do for you. Instead learn all the things YOU can do with them."

Why this book?

Most of the tutorials on the web teach the concepts of CSS Flexbox and Grid using some coloured blocks. You get introduced to all the CSS properties related to these concepts and how they work. But very rarely you get to see some examples of where and how these are used in the real world. Without understanding the real world application, learning is incomplete.

This book takes a completely different approach. I won't teach you the things flex and grid can do. Instead, I will first show you some components and layouts and make you think how to build them using the CSS concepts you already know. Now you have a problem, and you want a solution. That's when I introduce the concepts you "need" to know.

This is called Problem-Based Learning which will not only keep you motivated throughout the book, but also help you retain the knowledge far better.

Who is this book for?

Whether you are a beginner at CSS who's never heard of flex and grid, or someone who knows all the concepts but finding it hard to implement in real projects, or anywhere in between, this book is for you. Even if you're here to just look at some examples and practise your skills, you will find a great collection here.