CSS Flex & Grid: Complete Guide with Real World Examples and Code Snippets (Vanilla CSS)

Description

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 explained in Vanilla CSS (or pure CSS). Gain access to Private CodePen links with working demos for all examples. "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 practice your skills, you will find a great collection here. Complete Guide to CSS Flex & Grid - Vanilla CSS Disclaimer About the Author Table of Contents Introduction Time for another approach Who is this book for? Prerequisites What not to expect How to use this book? Flow of the book Newbie's Guide Intermediate's Guide CodePen Links Reach Out Why Flex and Grid The Problem What you might already know The Solution 1 Display Flex Quotes Side-by-Side Example 1a Understanding display: flex Concept 2 Justify Content Tabs Spaced Out Example 2a Understanding justify-content Concept Card with Previous & Next Links Example 2b Team Profiles Example 2c 3 Flex Wrap Responsive Team Profiles Example 3a Understanding flex-wrap Concept Logos Wrapped Example 3b 4 Align Items Icon and Text Example 4a Understanding align-items Concept Profile Card - Small Example 4b Services Section Example 4c Frequent Questions Example 4d Center a div Example 4e 5 Flex Direction Welcome Screen Example 5a Understanding flex-direction Concept Main Axis and Cross Axis Testimonial Card Example 5b Alternating List of Profiles Example 5c 6 Flex Grow Inline Subscribe Form Example 6a Understanding flex-grow Concept Sticky Footer Example 6b Card with Header & Footer Example 6c Tabs Hover Effect Example 6d Variable Width Responsive Buttons Example 6e 7 Flex Shrink Itinerary Example 7a Understanding flex-shrink Concept Profile Card - Large Example 7b 8 Flex Basis Split Screen Display Example 8a Understanding flex-basis Concept Blog Post Display Example 8b Pricing Plans Example 8c Spaces between the blocks 9 Flex Shorthand Property Understanding flex Concept Navigation Bar with Centered Menu Example 9a Image and Text in 2:1 Ratio Example 9b 10 Auto Margins Notifications Menu Item Example 10a Footer with Multiple Columns Example 10b 11 Order Responsive Navigation Bar Example 11a Understanding order Concept Mobile First Approach 12 Align Self Product Display Example 12a Understanding align-self Concept Profile with Rating Example 12b 13 Flex Flow 14 Align Content Full Page Testimonials Section Example 14a Understanding align-content Concept 15 Inline Flex Social Media Icons Example 15a Understanding inline-flex Concept Flexbox Unlocked! Comprehensive Examples for Flexbox Article Preview Example 16a Fitness Report Example 16b Tweet Example 16c 17 Display Grid & Grid Template Columns Full Page Gallery Example 17a Understanding display: grid Concept Understanding grid-template-columns Concept Layout with Sidebar Example 17b The fr Unit Services Grid Example 17c Quick Bites Menu Example 17d 18 Grid Template Rows Sticky Footer with Grid Example 18a Understanding grid-template-rows Concept 19 Gap Pricing Plans with Grid Example 19a Understanding column-gap Concept Blog Posts Display Example 19b Understanding row-gap Concept Understanding gap Concept 20 Justify Content Featured Logos in a Grid Example 20a Understanding justify-content in Grid Concept Shopping Cart Summary Example 20b 21 Align Content Profile Card with Bio & Link Example 21a Understanding align-content in Grid Concept 22 Place Content Featured Logos Center of Page Example 22a Understanding place-content in Grid Concept 23 Justify Items Featured Logos of Different Widths Example 23a Understanding justify-items Concept Profile Card with Bio & Link Centered Example 23b 24 Align Items Image and Text Section Example 24a Understanding align-items in Grid Concept Featured Logos of Different Heights Example 24b 25 Place Items Center a div using Grid Example 25a Understanding place-items Concept 26 Grid Column Horizontal Form Example 26a Understanding grid-column-start Concept Single Price Grid Component Example 26b Understanding grid-column-end Concept Understanding grid-column Concept Page Layout with Grid Example 26c 27 Grid Row Contact Form Example 27a Understanding grid-row-start and grid-row-end Concept Understanding grid-row Concept Responsive Services Section Example 27b Testimonials Grid Section Example 27c 28 Order Responsive Pricing Plans Example 28a Understanding order in Grid Concept 29 Advanced Grid Template Values Restaurant Details Example 29a Understanding max-content, min-content and fit-content() Concept Pricing Plans with Size Limits Example 29b Understanding minmax() Concept Blog Post Page with Code Snippet Example 29c Responsive Grid without Media Queries Example 29d Understanding auto-fit Concept Understanding auto-fill Concept 30 Grid Template Areas Responsive Contact Form Example 30a Understanding grid-template-areas Concept Understanding grid-area Concept Responsive Services Section with Grid Template Areas Example 30b 31 Grid Auto Flow Analytics Section Example 31a Understanding grid-auto-flow Concept 32 Grid Auto Rows Gallery Example 32a Understanding grid-auto-rows Concept 33 Justify Self & Align Self Restaurant Cards with Labels Example 33a Understanding justify-self and align-self Concept Caption at the Bottom of Image Example 33b Comprehensive Examples for Grid & Flexbox Services Section Example 34a Twitter Monthly Summary Card Example 34b Social Media Dashboard Example 34c Conclusion