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 Tailwind 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
Publisher: Gumroad
Year: 2021
Language: English
Pages: 175
Complete Guide to CSS Flex & Grid - Tailwind 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
Tailwind CSS Version Used
Tailwind Play 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 FlexConcept
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
12 Align Self
Product Display Example 12a
Understanding Align Self Concept
Profile with Rating Example 12b
13 Align Content
Full Page Testimonials Section Example 13a
Understanding Align Content Concept
14 Inline Flex
Social Media Icons Example 14a
Understanding Inline Flex Concept
Flexbox Unlocked!
Comprehensive Examples for Flexbox
Article Preview Example 15a
Fitness Report Example 15b
Tweet Example 15c
16 Display Grid & Grid Template Columns
Full Page Gallery Example 16a
Understanding Display Grid Concept
Understanding Grid Template Columns Concept
The CSS Property grid-template-columns & Values
Layout with Sidebar Example 16b
The fr Unit
Services Grid Example 16c
Quick Bites Menu Example 16d
17 Grid Template Rows
Sticky Footer with Grid Example 17a
Understanding Grid Template Rows Concept
18 Gap
Pricing Plans with Grid Example 18a
Understanding Column Gap Concept
Blog Posts Display Example 18b
Understanding Row Gap Concept
Understanding Gap Concept
19 Justify Content
Featured Logos in a Grid Example 19a
Understanding Justify Content in Grid Concept
Shopping Cart Summary Example 19b
20 Align Content
Profile Card with Bio & Link Example 20a
Understanding Align Content in Grid Concept
Featured Logos Center of Page Example 20b
Understanding Place Content in Grid Concept
21 Justify Items
Featured Logos of Different Widths Example 21a
Understanding Justify Items Concept
Profile Card with Bio & Link Centered Example 21b
22 Align Items
Image and Text Section Example 22a
Understanding Align Items in Grid Concept
Featured Logos of Different Heights Example 22b
23 Place Items
Center a div using Grid Example 23a
Understanding Place Items Concept
24 Grid Column Start, End & Span
Horizontal Form Example 24a
Understanding Column Start Concept
Single Price Grid Component Example 24b
Understanding Column End Concept
Understanding Column Span Concept
Page Layout with Grid Example 24c
25 Grid Row
Contact Form Example 25a
Understanding Row Start and Row End Concept
Understanding Row Span Concept
Responsive Services Section Example 25b
Testimonials Grid Section Example 25c
26 Order
Responsive Pricing Plans Example 26a
Understanding Order in Grid Concept
27 Advanced Grid Template Values
Pricing Plans with Size Limits Example 27a
Understanding minmax() Concept
Blog Post Page with Code Snippet Example 27b
Responsive Grid without Media Queries Example 27c
Understanding auto-fit Concept
Understanding auto-fill Concept
28 Grid Auto Flow
Analytics Section Example 28a
Understanding Grid Auto Flow Concept
29 Justify Self & Align Self
Restaurant Cards with Labels Example 29a
Understanding Justify Self and Align Self Concept
Caption at the Bottom of Image Example 29b
Comprehensive Examples for Grid & Flexbox
Services Section Example 30a
Twitter Monthly Summary Card Example 30b
Social Media Dashboard Example 30c
Conclusion
