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.
Author(s): Shruti Balasa
Edition: 1.0
Publisher: Gumroad
Year: 2021
Language: English
Pages: 190
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
