4.6 Center a div ...................................................................

8
CHEAT SHEET 4.7 Solution 1 Center a div .................................................. 8
4.8 Solution 2 Center a div .................................................. 8
CSS FLEX & GRID - TAILWIND CSS
5. Flex Direction ....................................................................... 8
Prepared By
5.1 Possible Solution Flex Direction .................................... 8
Abubakar Siddique
5.2 Better Solution Flex Direction ....................................... 8
[email protected]
5.3 Understanding Flex Direction ........................................ 8
+923017362696
5.4 Main Axis and Cross Axis ............................................... 9
TABLE OF CONTENTS
5.5 Testimonial Card ........................................................... 9
1. Display Flex ..........................................................................5 5.6 Solution Testimonial Card ............................................. 9
1.1 Quotes Side-by-Side ......................................................5 5.7 Alternating List of Profiles ............................................. 9
Solution 1.1 Quotes Side-by-Side ........................................5 5.8 Markup Alternating List of Profiles ............................... 9
1.2 Understanding Display Flex ...........................................5 5.9 Solution Alternating List of Profiles ............................... 9
2. Justify Content .....................................................................5 6. Flex Grow ............................................................................. 9
2.1 Tabs Spaced Out ............................................................5 6.1 Markup Flex Grow ......................................................... 9
2.2 Understanding Justify Content ......................................5 6.2 Solution Flex Grow ........................................................ 9
2.3 justify-content: flex-start; ..............................................5 6.3 Understanding Flex Grow .............................................. 9
2.4 justify-content: flex-end; ...............................................5 6.4 Sticky Footer ................................................................ 10
2.5 justify-content: center; ..................................................5 6.5 Markup Sticky Footer .................................................. 10
2.6 justify-content: space-between; ....................................5 6.6 Solution Sticky Footer ................................................. 10
2.7 justify-content: space-around; ......................................5 6.7 Card with Header & Footer ......................................... 10
2.8 justify-content: space-evenly; .......................................6 6.8 Tabs Hover Effect ........................................................ 10
2.9 Card with Previous & Next Links ....................................6 6.9 Solution Tabs Hover Effect .......................................... 10
2.10 Team Profiles ...............................................................6 6.10 Variable Width Responsive Buttons .......................... 10
3. Flex Wrap .............................................................................6 6.11 Markup Variable Width Responsive Buttons ............ 11
3.1 Solution flex-wrap .........................................................6 6.12 Solution Variable Width Responsive Buttons ............ 11
3.1 Understanding Flex Wrap ..............................................6 7. Flex Shrink .......................................................................... 11
3.2 Logos Wrapped ..............................................................6 7.1 Itinerary ....................................................................... 11
3.3 Solution Logos Wrapped ................................................6 7.2 Markup Itinerary ......................................................... 11
4. Align Items ...........................................................................7 7.3 Solution Itinerary ......................................................... 11
4.1 Icon and Text .................................................................7 7.4 Understanding Flex Shrink .......................................... 11
4.1 Solution Icon and Text ...................................................7 7.5 Profile Card – Large ..................................................... 11
4.2 Understanding Align Items ............................................7 7.6 Markup Profile Card – Large ........................................ 11
4.3 Profile Card – Small........................................................7 7.7 Solution Profile Card – Large ....................................... 11
4.4 Services Section .............................................................7 8. Flex Basis ............................................................................ 11
4.5 Frequent Questions .......................................................8 8.1 Split Screen Display ..................................................... 11

Page 1 of 32
 8.2 Markup Split Screen Display ........................................12 12.4 Markup Profile with Rating ....................................... 16
8.3 Possible Solution 1 Split Screen Display ......................12 12.5 Solution Profile with Rating ....................................... 16
8.4 Possible Solution 2 Split Screen Display ......................12 13. Align Content ................................................................... 16
8.5 Better Solution Split Screen Display ............................12 13.1 Full Page Testimonials Section .................................. 16
8.6 Understanding Flex Basis .............................................12 13.2 Markup Full Page Testimonials Section ..................... 17
8.7 Blog Post Display .........................................................12 13.3 Solution Full Page Testimonials Section .................... 17
8.8 Markup Blog Post Display ............................................12 13.4 Understanding Align Content .................................... 17
8.9 Solution Blog Post Display ...........................................12 14. Inline Flex ......................................................................... 17
8.10 Pricing Plans ...............................................................13 14.1 Social Media Icons ..................................................... 17
8.11 Markup Pricing Plans .................................................13 14.2 Markup Social Media Icons ....................................... 17
8.12 Possible Solution Pricing Plans ..................................13 14.3 Solution Social Media Icons ....................................... 17
8.13 Better Solution Pricing Plans .....................................13 14.4 Understanding Inline Flex.......................................... 17
9. Flex Shorthand Property ....................................................13 14.5 Comprehensive Examples for Flexbox ...................... 18
9.1 Understanding Flex ......................................................13 14.5.1 Article Preview ................................................... 18
9.2 Navigation Bar with Centered Menu ...........................13 14.5.2 Fitness Report .................................................... 18
9.3 Markup Navigation Bar with Centered Menu .............14 14.5.3 Tweet ................................................................. 18
9.4 Solution Navigation Bar with Centered Menu .............14 16. Display Grid & Grid Template Columns ........................... 18
9.5 Image and Text in 2:1 Ratio .........................................14 16.1 Full Page Gallery ........................................................ 18
9.6 Markup Image and Text in 2:1 Ratio ...........................14 16.2 Markup Full Page Gallery .......................................... 18
9.7 Solution Image and Text in 2:1 Ratio ...........................14 16.3 Solution Full Page Gallery .......................................... 18
10. Auto Margins....................................................................14 16.4 Understanding Display Grid ...................................... 18
10.1 Notifications Menu Item............................................14 16.5 Understanding Grid Template Columns .................... 19
10.2 Markup Notifications Menu Item ..............................14 16.6 The CSS Property grid-template-columns & Values .. 19
10.3 Solution Notifications Menu Item .............................14 16.7 Layout with Sidebar ................................................... 19
10.4-Footer with Multiple Columns ..................................14 16.8 Markup Layout with Sidebar ..................................... 19
10.5 Markup Footer with Multiple Columns .....................15 16.9 Solution Layout with Sidebar .................................... 19
10.6 Solution Footer with Multiple Columns.....................15 16.10 Services Grid ............................................................ 19
11. Order ................................................................................15 16.11 Solution Services Grid.............................................. 19
11.1 Responsive Navigation Bar ........................................15 16.12 CSS Solution Services Grid ....................................... 19
11.2 Markup Responsive Navigation Bar ...........................15 16.13 Better Solution Services Grid................................... 19
11.3 Solution Responsive Navigation Bar ..........................15 16.14 Quick Bites Menu .................................................... 19
11.4 Understanding Order .................................................15 16.15 Markup Quick Bites Menu ....................................... 19
12. Align Self ..........................................................................15 16.16 Solution Quick Bites Menu ...................................... 20
12.1 Solution Align Self ......................................................16 17. Grid Template Rows ........................................................ 20
12.2 Understanding Align Self ...........................................16 17.1 Sticky Footer with Grid .............................................. 20
12.3 Profile with Rating .....................................................16 17.2 Markup Sticky Footer with Grid ................................ 20

Page 2 of 32
 17.3 Solution Sticky Footer with Grid ................................20 21.4 Understanding Justify Items ...................................... 24
17.4 Understanding Grid Template Rows ..........................20 21.5 Profile Card with Bio & Link Centered ....................... 24
18. Gap ...................................................................................20 21.6 Markup Profile Card with Bio & Link Centered ......... 24
18.1 Pricing Plans with Grid ...............................................20 21.7 Solution Profile Card with Bio & Link Centered ......... 24
18.2 Markup Pricing Plans with Grid .................................20 22. Align Items ....................................................................... 24
18.3 Solution Pricing Plans with Grid .................................20 22.1 Image and Text Section ............................................. 24
18.4 Understanding Column Gap ......................................20 22.2 Markup Image and Text Section ................................ 24
18.5 Blog Posts Display ......................................................21 22.3 Solution Image and Text Section ............................... 24
18.6 Markup Blog Posts Display ........................................21 22.4 Understanding Align Items in Grid ............................ 24
18.7 Responsive Solution Blog Posts Display .....................21 22.5 Featured Logos of Different Heights ......................... 25
18.8 Better Solution Blog Posts Display .............................21 22.6 Markup Featured Logos of Different Heights ............ 25
18.9 Understanding Row Gap ............................................21 22.7 Solution Featured Logos of Different Heights ........... 25
18.10 Understanding Gap ..................................................21 23. Place Items ....................................................................... 25
19. Justify Content .................................................................21 23.1 Center a div using Grid .............................................. 25
19.1 Markup Justify Content .............................................21 23.2 Markup Center a div using Grid................................. 25
19.2 Solution Justify Content .............................................21 23.3 Solution Center a div using Grid ................................ 25
19.3 Understanding Justify Content in Grid ......................21 23.4 Understanding Place Items ....................................... 25
19.4 Shopping Cart Summary ............................................22 24. Grid Column Start, End & Span ........................................ 25
19.5 Markup Shopping Cart Summary ..............................22 24.1 Horizontal Form......................................................... 25
19.6 Solution Shopping Cart Summary ..............................22 24.2 Markup Horizontal Form ........................................... 26
20.Align Content ....................................................................22 24.3 Solution Horizontal Form .......................................... 26
20.1 Profile Card with Bio & Link .......................................22 23.4 Understanding Column Start ..................................... 26
20.2 Markup Profile Card with Bio & Link .........................22 23.5 Single Price Grid Component .................................... 26
20.3 Solution Profile Card with Bio & Link .........................22 23.6 Markup Single Price Grid Component ....................... 26
20.4 Understanding Align Content in Grid ........................22 23.7 Solution Single Price Grid Component ...................... 26
20.5 Featured Logos Center of Page..................................23 23.8 Understanding Column End ...................................... 26
20.6 Markup Featured Logos Center of Page ....................23 23.9 Understanding Column Span ..................................... 26
20.7 Solution Featured Logos Center of Page ...................23 23.10 Page Layout with Grid ............................................. 27
20.8 A small variation ........................................................23 23.11 Markup Page Layout with Grid ................................ 27
20.9 Solution A small variation ..........................................23 23.12 Solution Page Layout with Grid ............................... 27
20.9 Better Solution A small variation ...............................23 25. Grid Row .......................................................................... 27
20.10 Understanding Place Content in Grid ......................23 25.1 Markup Grid Row ...................................................... 27
21. Justify Items .....................................................................23 25.2 Solution Grid Row...................................................... 27
21.1 Featured Logos of Different Widths ..........................23 25.3 Understanding Row Start and Row End .................... 27
21.2 Markup Featured Logos of Different Widths .............23 25.4 Understanding Row Span .......................................... 27
21.3 Solution Featured Logos of Different Widths ............24 25.5 Responsive Services Section ...................................... 27

Page 3 of 32
 25.6 Markup Responsive Services Section ........................28 30.1 Services Section ......................................................... 32
25.7 Solution Responsive Services Section ........................28 30.2 Twitter Monthly Summary Card ................................ 32
25.8 Testimonials Grid Section ..........................................28 30.3 Social Media Dashboard ............................................ 32
25.9 Markup Testimonials Grid Section ............................28 Conclusion ............................................................................. 32
25.10 Solution Testimonials Grid Section ..........................28
26. Order ................................................................................28
26.1 Markup Order ............................................................29
26.2 Solution Order ...........................................................29
26.3 Understanding Order in Grid .....................................29
27. Advanced Grid Template Values ......................................29
27.1 Pricing Plans with Size Limits .....................................29
27.2 HTML .........................................................................29
27.3 Solution Pricing Plans with Size Limits .......................29
27.4 Understanding minmax() ...........................................29
27.5 Blog Post Page with Code Snippet .............................29
27.6 Solution Blog Post Page with Code Snippet ...............30
27.7 Responsive Grid without Media Queries ...................30
27.8 HTML Responsive Grid without Media Queries ........30
27.9 Solution Responsive Grid without Media Queries .....30
27.10 Understanding auto-fit ............................................30
27.11 How the browser calculates ....................................30
27.12 Understanding auto-fill............................................31
28. Grid Auto Flow .................................................................31
28.1 Analytics Section ........................................................31
28.2 HTML Analytics Section .............................................31
28.3 Solution Analytics Section .........................................31
28.4 Understanding Grid Auto Flow ..................................31
29. Justify Self & Align Self .....................................................31
29.1 Restaurant Cards with Labels ....................................31
29.2 Markup Restaurant Cards with Labels .......................31
29.3 Solution Restaurant Cards with Labels ......................31
29.4 Understanding Justify Self and Align Self ..................32
29.5 Caption at the Bottom of Image ................................32
29.6 Markup Caption at the Bottom of Image ..................32
29.7 Solution Caption at the Bottom of Image ..................32
30 Comprehensive Examples for Grid & Flexbox ...................32

Page 4 of 32
1. DISPLAY FLEX

A parent element called flex container and at least

one child element called flex item. Flexbox is a
method that helps us arrange elements in one
direction (horizontally or vertically) and control
2.2 UNDERSTANDING JUSTIFY CONTENT
their dimensions, alignments, order of appearance
and more. The utility classes justify-* are used to control
1.1 QUOTES SIDE-BY-SIDE spacing of the flex items in the direction they are
placed.
2.3 JUSTIFY-CONTENT: FLEX-START;

All items are placed at the beginning of the

container with no spaces.
SOLUTION 1.1 QUOTES SIDE-BY-SIDE

2.4 JUSTIFY-CONTENT: FLEX-END;

All items are placed at the end of the container with

no spaces
1.2 UNDERSTANDING DISPLAY FLEX

Flexbox is a method that helps us arrange elements

in one direction (horizontally or vertically) and
2.5 JUSTIFY-CONTENT: CENTER;
control their dimensions, alignments, order of
appearance and more. For this, we need at least two All items are placed at the center with no spaces
elements - a parent element called flex container
and at least one child element called flex item.
Tailwind CSS Explanation
Class Property & 2.6 JUSTIFY-CONTENT: SPACE-BETWEEN;
Value
All items are spaced out as much as possible with
flex display: Setting the display
first item at the beginning and last item at the end
flex; property of an element (We just saw this in action)
to flex
makes it a flex
container
2. JUSTIFY CONTENT 2.7 JUSTIFY-CONTENT: SPACE-AROUND;

2.1 TABS SPACED OUT Space before the flex items and after the flex items
are half as much as space between the items
To justify the multiple elements in a flex container
by dividing equal space between all elements in the
container.

Page 5 of 32
2.8 JUSTIFY-CONTENT: SPACE-EVENLY; 3.1 SOLUTION FLEX-WRAP

Space before, after and between the items are same

2.9 CARD WITH PREVIOUS & NEXT LINKS 3.1 UNDERSTANDING FLEX WRAP

"Prev" and "Next" buttons placed at the extreme The flex-wrap utility class makes the flex items wrap
ends of a card. This is a great example of flexbox if you run out of space. The default behavior is to
with justify-* utilities used for alignment not wrap, which is why the child items do not move
into the next row automatically.
Tailwind CSS Explanation
Class Property &
Value
flex-wrap flex-wrap: Items are wrapped
wrap; into the next line if
needed
flex- flex-wrap: Items are not wrapped
nowrap nowrap; even if it causes
Overflow
2.10 TEAM PROFILES
flex- flex-wrap: Items are wrapped in
To adjust some space around the container, with wrap- wrap- the reverse direction
flexbox and justify-around class for the container reverse reverse;
3.2 LOGOS WRAPPED

to display a few logos of your clients in a row with

spaces between and around them and you want
them to be responsive on smaller screens. You can
3. FLEX WRAP use justify-around for the spacing and the flex-wrap
class to wrap the logos. Try out flex-wrap-reverse
To move Items to next row for smaller screens. Add instead, to see the difference.
another class flex-wrap to the container element

3.3 SOLUTION LOGOS WRAPPED

Page 6 of 32
 case of the above
example)
items- align- All items are aligned to
end items: flex- the end of the container
end; (at the bottom in case of
4. ALIGN ITEMS
the above example)
4.1 ICON AND TEXT items- align- All items are positioned
baseline items: such that the base aligns
An icon and text placed next to each other vertically baseline; to the end of the
centered. container
You can see the difference between these values
below:

4.1 SOLUTION ICON AND TEXT

To understand the effect of items-baseline value,

replace the svg icon with an alphabet and increase
the font size by changing

4.2 UNDERSTANDING ALIGN ITEMS

justify-* can be used to space out the items

horizontally, and items-* can be used to align items
vertically.

The most used utilities are items-stretch and items-

center
4.3 PROFILE CARD – SMALL

Many times, we need a component with an avatar

Tailwind CSS Explanation
and a couple of lines next to it. The items-center
Class Property &
utility is very useful for such requirements
Value
items- align- All items are stretched
stretch items: to fill the container
stretch;
4.4 SERVICES SECTION
items- align- All items are aligned to
center items: the center of the we don't want to set a fixed height to keep all the
center; Container boxes the same height. you can remove the items-
stretch class because it’s the default. We can also
items- align- All items are aligned to
use items-stretch utility class.
start items: flex- the beginning of the
start; container (at the top in

Page 7 of 32
 5. FLEX DIRECTION

Here's an example you will come across a lot. Two

or more items vertically centered within its
container.

some questions are preceded by numbers aligned to

the top.
4.5 FREQUENT QUESTIONS

Look at this example where some questions are

preceded by numbers aligned to the top.
5.1 POSSIBLE SOLUTION FLEX DIRECTION

5.2 BETTER SOLUTION FLEX DIRECTION

4.6 CENTER A DIV
Simple add the flex, flex-col and justify-center
With flexbox, using the justify-* and items-* utilities, classes to the parent div:
it's super easy. Adding justify-center and items-
center positions the child item at the center of the
page horizontally and vertically.
5.3 UNDERSTANDING FLEX DIRECTION

By default, all the child elements placed in a single

row.
Tailwind CSS Explanation
4.7 SOLUTION 1 CENTER A DIV Class Property &
Value
flex-row flex- This is the default
direction: behavior. All items
row; are placed in a single
There's another way you could achieve the same row from left to right
result. instead of using justify-center and items-
flex-col flex- All items are placed
center on container, we have used m-auto utility on
direction: in a single column
the flex item to set the CSS margin property to auto.
column; from top to bottom
4.8 SOLUTION 2 CENTER A DIV
flex-row- flex- All items are placed
reverse direction: in a single row from
row-reverse; right to left

Page 8 of 32
 flex-col- flex- All items are placed
reverse direction: in a single column
col-reverse; from
bottom to top
5.4 MAIN AXIS AND CROSS AXIS

When the flex direction is row, X axis is the main axis 5.8 MARKUP ALTERNATING LIST OF PROFILES
and Y axis is the cross axis. But for flex direction
column, Y axis is the main axis and X axis is the cross
axis.

5.9 SOLUTION ALTERNATING LIST OF

PROFILES

The justify-* utilities control spacing and alignment

along the main axis, while the items-* utilities
control alignment along the cross axis. 6. FLEX GROW
5.5 TESTIMONIAL CARD the text input occupies all the available horizontal
We need to apply 4 utility classes to the container. space of its parent container. The class flex-grow is
card the first one to be used on a child element - the flex
item.

6.1 MARKUP FLEX GROW

5.6 SOLUTION TESTIMONIAL CARD

6.2 SOLUTION FLEX GROW

6.3 UNDERSTANDING FLEX GROW

By adding the flex-grow class to an element, we are

5.7 ALTERNATING LIST OF PROFILES
changing the element's flex-grow to 1. In CSS, you
Using flex-row-reverse only for even child items, you can set this to any number greater than 0. This value
can achieve this without changing the order. is also called the grow factor. You can make the item
occupy the left-over space (Left over width in case

Page 9 of 32
of row direction, and left over height in case of 6.7 CARD WITH HEADER & FOOTER
column direction)
Let's say we have a card of a specific height - like a
blogpost preview with title (as header), an excerpt
and a "Read more" button (as footer). The excerpt
In Tailwind CSS, we have only two utility classes might sometimes be small, but you would want your
available with respect to flex grow. button to "stick" to the bottom of the card
regardless of the height of the excerpt.
Tailwind CSS Explanation
Class Property
& Value
flex-grow flex-grow: The item grows to
1; occupy remaining
space along the
main The code is very similar to our Sticky Footer
axis example.
flex-grow- flex-grow: This is the default. 6.8 TABS HOVER EFFECT
0 0; The item occupies
only as much space Each tab has a variable width depending on the text.
as needed even if Once hovered, the active tab expands while the
more space is other two.
available
6.4 STICKY FOOTER

flexbox for the whole layout, with column direction

and adding flex-grow to the main content. 6.9 SOLUTION TABS HOVER EFFECT

Initially, all the tabs are set to flex-grow: 1 and on

hover, we increase the value of flex-grow to any
number depending on how wide you want the
active tab to be.

6.5 MARKUP STICKY FOOTER

6.10 VARIABLE WIDTH RESPONSIVE BUTTONS

this is very easy with flex-grow. Also, when you set

the flex-wrap property to wrap, you get a responsive
6.6 SOLUTION STICKY FOOTER solution without using any media queries.

Page 10 of 32
6.11 MARKUP VARIABLE WIDTH RESPONSIVE should occupy; the shrink factor specifies how much
BUTTONS space should be reduced from the flex item's initial
width.
In Tailwind CSS, we have only two utility classes
available with respect to flex shrink.
Tailwind CSS Explanation
6.12 SOLUTION VARIABLE WIDTH Class Property
RESPONSIVE BUTTONS & Value
flex-shrink flex-shrink: This is the default. The
1; item shrinks along the
main axis
to fit in a single row.
7. FLEX SHRINK
flex- flex-shrink: The item does not
shrink-0 0; shrink even if it causes
the container
7.1 ITINERARY to overflow
Here's a simple itinerary component with the 7.5 PROFILE CARD – LARGE
description on left and time on right.
If you add a long description instead of small text,
the image on the left shrinks to become an oval on
smaller screens

7.6 MARKUP PROFILE CARD – LARGE

7.2 MARKUP ITINERARY

7.7 SOLUTION PROFILE CARD – LARGE

7.3 SOLUTION ITINERARY

A HTML solution to this is to wrap the time in <nobr>

tags. This will prevent the time span from shrinking.

8. FLEX BASIS

8.1 SPLIT SCREEN DISPLAY

7.4 UNDERSTANDING FLEX SHRINK
On large screens, the page is split up horizontally
The default behavior of flex items is to shrink to fit and on smaller screens, it's split up vertically.
in a single row or a single column of the container
(unless flex-wrap is set to wrap). The way grow
factor specifies how much additional space the item
Page 11 of 32
 By default, the value of flex-basis is auto, which
means the size is auto-calculated based on the
width or height utilities. Once the basis-* utilities
are added to the upcoming version in Tailwind CSS,
you can
use it similar to the width and height utilities. Some
of the example values are here:
8.2 MARKUP SPLIT SCREEN DISPLAY
Tailwind CSS Explanation
Class Property &
Value
basis- flex-basis: This is the default value.
8.3 POSSIBLE SOLUTION 1 SPLIT SCREEN auto auto; The size is auto-
DISPLAY calculated
basis-0 flex-basis: We will soon see a use-
0; case for 0 value
basis- flex-basis: The size is 100%
8.4 POSSIBLE SOLUTION 2 SPLIT SCREEN full 100%;
DISPLAY basis- flex-basis: Percentage values like
1/2 50%; 25% , 50% , 75% ,
33.33% ,
66.67% and so on will
be available
8.5 BETTER SOLUTION SPLIT SCREEN DISPLAY
basis-24 flex-basis: All the fixed values like
6rem 6rem that are available
for
width and height will be
But basis-1/2 is not yet a utility class in v2.2.15. It available
will soon be added to v3+. Until then, we can add
8.7 BLOG POST DISPLAY
custom CSS like this
It has an image on the left and long text on the
right.

8.6 UNDERSTANDING FLEX BASIS

The property flex-basis is another one that can be 8.8 MARKUP BLOG POST DISPLAY
defined on the flex item along with flex-grow and
flex-shrink. this property sets the initial size of the
flex item - that is, width in case of row direction and
height in case of column direction. Along with flex-
grow and flex-shrink, this property helps decide the
size of the flex item.
8.9 SOLUTION BLOG POST DISPLAY

Page 12 of 32
 Instead of using three separate utilities flex-grow-*
, flex-shrink-* and basis-* , we can make use of a
single flex-* shorthand utility.

For a version lower than v3, we need the following

9.1 UNDERSTANDING FLEX
custom styles too:
The flex-* utility classes control how flex items both
grow and shrink along with specifying an initial size.
In Tailwind CSS, we have four of these utility classes
that cover most of the use cases.
8.10 PRICING PLANS Tailwind CSS Explanation
Class Property
Three equally sized blocks with margins in between
& Value
is a very common pattern.
flex-1 flex: 1 1 Flex item grows and shrinks as
0%; needed ignoring the
initial size. If this is used on
multiple items, all the items
8.11 MARKUP PRICING PLANS take up equal space.
flex-auto flex: 1 1 Flex item grows and shrinks as
auto; needed considering the
initial size. If this is used on
multiple items, all the items
take up space based on their
8.12 POSSIBLE SOLUTION PRICING PLANS content.
Set basis-1/3 to all the flex items along with mx-4 for flex-initial flex: 0 1 This is the default. The item
spacing between the plans: auto; shrinks when space is less
but does not grow when
there's space available. Initial
size is auto-calculated.
flex-none flex: none; The item does not grow, nor
for versions lower than 3.0, we need these custom shrink.
styles: it's good to understand the syntax of the CSS flex
property if you ever need to customize. The flex
property may be specified using one, two, or three
values separated by spaces.
Syntax
8.13 BETTER SOLUTION PRICING PLANS flex: <flex-grow> <flex-shrink> <flex-basis>
9.2 NAVIGATION BAR WITH CENTERED MENU

Though it looks simply, it's not straightforward to

implement.
9. FLEX SHORTHAND PROPERTY

Page 13 of 32
 9.6 MARKUP IMAGE AND TEXT IN 2:1 RATIO

9.3 MARKUP NAVIGATION BAR WITH

CENTERED MENU 9.7 SOLUTION IMAGE AND TEXT IN 2:1 RATIO

10. AUTO MARGINS

10.1 NOTIFICATIONS MENU ITEM

9.4 SOLUTION NAVIGATION BAR WITH
Here's an example of a very small component with
CENTERED MENU
icon and text on left, and a count on right
We want to achieve the first result. So how do we
do it? If the elements a and span are of same width,
then justify-between will help us achieve the
desired result. Along with the flex-1 utility, we also 10.2 MARKUP NOTIFICATIONS MENU ITEM
need text-right for the span element to push the
button to the right of the span
Markup

10.3 SOLUTION NOTIFICATIONS MENU ITEM

9.5 IMAGE AND TEXT IN 2:1 RATIO

You must have seen so many components with two

elements placed side-by-side with widths in the 10.4-FOOTER WITH MULTIPLE COLUMNS
ratio 2:1 or 1:2. Here's one such example This is another common footer structure with logo
on the left and a few columns "pushed" to the right.

Page 14 of 32
 width. Then using the md: prefix, 1. Set the order of
ul back to 0 2. Set the width of ul back to auto
10.5 MARKUP FOOTER WITH MULTIPLE
COLUMNS 11.3 SOLUTION RESPONSIVE NAVIGATION
BAR

11.4 UNDERSTANDING ORDER

10.6 SOLUTION FOOTER WITH MULTIPLE Some of the common utilities for order are here:
COLUMNS Tailwind CSS Explanation
Class Property
& Value
order-1 order: 1; Any number from 1 to
12 are available
11. ORDER similarly using order-2,
order-3
11.1 RESPONSIVE NAVIGATION BAR order- order: - The item gets placed at
first 9999; the beginning because
Assume that you have just 3 links in the navigation
the value is a large
bar and you want those links to appear in the second
negative number
row on mobile screens.
order- order: The item gets placed at
last 9999; the end because the
value is a large positive
number
order- order: 0; This is the default.
none
12. ALIGN SELF

By default, all the elements are stretched full width

(along the cross axis). But you want the button alone
11.2 MARKUP RESPONSIVE NAVIGATION BAR to be pushed to the right instead of stretching full
width.

Tailwind CSS, on small screens we first need to do

two things: 1. Change the order of the ul element to
appear last 2. Make the ul element occupy full

Page 15 of 32
 direction and at the
right for column
direction)
self- align-self: The item is positioned
baseline baseline; such that the base
aligns to the end of the
container (applies only
for row direction)
12.3 PROFILE WITH RATING

This one has a rating at the top right corner of the

12.1 SOLUTION ALIGN SELF card. While the image and text are center aligned
vertically, the rating is aligned to the top.

12.4 MARKUP PROFILE WITH RATING

12.2 UNDERSTANDING ALIGN SELF

The self-* utilities for a flex item are similar to the

items-* utilities. These classes override the items-*
classes applied to the parent container
Tailwind CSS Explanation 12.5 SOLUTION PROFILE WITH RATING
Class Property &
Value
self- align-self: The item is stretched
stretch stretch; to fill the container
along the cross axis 13. ALIGN CONTENT
self- align-self: The item is placed at
center center; the center of the 13.1 FULL PAGE TESTIMONIALS SECTION
container along the
Let's say you have a few testimonial cards as flex
cross axis
items wrapped in multiple rows. You want these
self-start align-self: The item is placed at items to be center aligned vertically in a full height
flex-start; the beginning of the page.
container (at the top
for row direction and
at the left for column
direction)
self-end align-self: The item is placed at
flex-end; the end of the
container (at the
bottom for row

Page 16 of 32
13.2 MARKUP FULL PAGE TESTIMONIALS content- align- Space at the beginning,
SECTION evenly content: end and between the
space- lines are same
evenly;
14. INLINE FLEX
13.3 SOLUTION FULL PAGE TESTIMONIALS
14.1 SOCIAL MEDIA ICONS
SECTION
Let's say you want a row of rounded icons with each
icon placed at the exact center within the circle like
this.
13.4 UNDERSTANDING ALIGN CONTENT

The content-* utilities are used on the flex container

for aligning multi-line flex items along the cross axis. 14.2 MARKUP SOCIAL MEDIA ICONS
It works only for flex items that flow into multiple
rows or columns. The available utilities are
mentioned below:
Tailwind CSS Explanation
Class Property &
Value
content- align- The items are packed
14.3 SOLUTION SOCIAL MEDIA ICONS
start content: at the beginning of the
flex-start; container Now simply change flex to inline-flex
content- align- The items are packed
end content: at the end of the
flex-end; container
content- align- The items are packed
center content: at the center of the
center; Container
content- align- The rows / columns 14.4 UNDERSTANDING INLINE FLEX
between content: are spaced out as
space- much as the utility inline-flex does not affect the flex items.
between; It makes the flex container itself behave like an
possible with first line inline element instead of a block element.
at the beginning and
last Tailwind CSS Property Explanation
Class & Value
line at the end
content- align- Space at the beginning inline- display: Makes the flex
around content: and the end are half as flex inline-flex; container itself
space- much as space behave like an inline
around; between the lines element

Page 17 of 32
14.5 COMPREHENSIVE EXAMPLES FOR 16. DISPLAY GRID & GRID TEMPLATE
FLEXBOX COLUMNS

16.1 FULL PAGE GALLERY

14.5.1 ARTICLE PREVIEW

Use the utilities flex, flex-col, align-items, ml-auto

and arbitrary values for flex-* to achieve the 40% 16.2 MARKUP FULL PAGE GALLERY
and 60% widths.

14.5.2 FITNESS REPORT

16.3 SOLUTION FULL PAGE GALLERY

Now you need to add two utility classes to the

.container element to arrange the child elements in
a grid form.
Use the utilities flex, flex-wrap, flex-* for the outer
flexbox. Use flex-col, justify-* and min-w-* to allow
the blocks to wrap.
16.4 UNDERSTANDING DISPLAY GRID
14.5.3 TWEET
While flexbox helps us arrange elements in one
There's so much to learn from a single "tweet"
dimension (row or column), grid is a method that
design. This is an exact mockup of a tweet in the
timeline on the Twitter web app (except for the helps us arrange and align elements in both the
dimensions with rows and columns. we need at least
font).
two elements - a parent element called grid
container and at least one child element called grid
item
Tailwind CSS Explanation
Here you will need to create three flexbox Class Property &
containers! One for the entire tweet. Two for the Value
name, handle, date and options. And third one for grid display: Setting the display
the row with actions having "reply", "retweet" etc. grid; property of an element
Use the utilities flex, justify-*, items-* and auto to grid makes it a grid
margins. container

Page 18 of 32
16.5 UNDERSTANDING GRID TEMPLATE 16.9 SOLUTION LAYOUT WITH SIDEBAR
COLUMNS

The utilities grid-cols-* is used to specify how many

columns you need and of what size each.
The fr Unit
Tailwind Explanation
The fr is short for fraction representing fraction of
Class
the remaining space.
grid-cols-1 Creates one grid column
16.10 SERVICES GRID
occupying full width of the
container
grid-cols-2 Creates two grid columns
occupying 50% width each
grid-cols-3 Creates three grid columns
occupying 33.33% width each
16.6 THE CSS PROPERTY GRID-TEMPLATE-
COLUMNS & VALUES 16.11 SOLUTION SERVICES GRID
CSS Syntax:
grid-template-columns: <value> <value> ...
Using the CSS property grid-template-columns, we
can specify the widths of each column in %, pox, rem 16.12 CSS SOLUTION SERVICES GRID
etc., separated by spaces
grid-template-columns: 50% 50%
Since we don't have a Tailwind utility for such
values, we can use arbitrary values for achieving the 16.13 BETTER SOLUTION SERVICES GRID
same output
grid-cols-[40%,60%]
16.7 LAYOUT WITH SIDEBAR
16.14 QUICK BITES MENU

16.8 MARKUP LAYOUT WITH SIDEBAR

16.15 MARKUP QUICK BITES MENU

Page 19 of 32
 Tailwind Explanation
Class
grid-rows-1 Creates one grid row occupying full
height of the container
grid-rows-2 Creates two grid rows occupying
16.16 SOLUTION QUICK BITES MENU
50% height each
grid-rows-3 Creates three grid rows occupying
33.33% height each
17. GRID TEMPLATE ROWS 18. GAP

17.1 STICKY FOOTER WITH GRID 18.1 PRICING PLANS WITH GRID

18.2 MARKUP PRICING PLANS WITH GRID

18.3 SOLUTION PRICING PLANS WITH GRID

17.2 MARKUP STICKY FOOTER WITH GRID

18.4 UNDERSTANDING COLUMN GAP

The gap-x-* utilities set the size of the horizontal gap

17.3 SOLUTION STICKY FOOTER WITH GRID (also known as gutters) between columns
Tailwind CSS Property & Explanation
Class Value
gap-x-0 column-gap: 0; Gap between
17.4 UNDERSTANDING GRID TEMPLATE columns is 0
ROWS gap-x-4 column-gap: Gap between
we needed rows of different heights; hence we used 1rem; columns is 1rem
arbitrary values. But if we need equal height rows, gap-x-6 column-gap: Gap between
we have grid-rows-* utility classes for that in 1.5rem; columns is 1.5rem
Tailwind.
gap-x-8 column-gap: Gap between
2rem; columns is 2rem

Page 20 of 32
18.5 BLOG POSTS DISPLAY 19.1 MARKUP JUSTIFY CONTENT

19.2 SOLUTION JUSTIFY CONTENT

19.3 UNDERSTANDING JUSTIFY CONTENT IN

GRID

In flexbox, you have the main axis and the cross axis.
Similarly, while working with grid, you have the
18.6 MARKUP BLOG POSTS DISPLAY inline axis and the block axis.

18.7 RESPONSIVE SOLUTION BLOG POSTS

DISPLAY

The justify-* utilities are used to control placement

18.8 BETTER SOLUTION BLOG POSTS DISPLAY of the grid items along the inline/row axis - which is
the horizontal direction.
Tailwind CSS Property Explanation
Class & Value
18.9 UNDERSTANDING ROW GAP justify-start justify- All columns are
content: flex- placed at the
The gap-y-* utilities set the size of the vertical gap
start; beginning of the
(also known as gutters) between rows.
container
18.10 UNDERSTANDING GAP
justify-end justify- All columns are
The utility gap is used to set the same spacing content: flex- placed at the
between rows and columns at once. The available end; end of the
utilities are similar to that of gap-x-* and gap-y-*. container
19. JUSTIFY CONTENT justify-center justify- All columns are
content: placed at the
center; center
justify- justify- All columns are
between content: spaced out as

Page 21 of 32
 space- much as 20.1 PROFILE CARD WITH BIO & LINK
between; possible with
first column at
the beginning
and last column
at the end (We
just saw this
in action)
justify- justify- Space before
around content: the columns
space-around; and after the
columns are
half as much as
space between 20.2 MARKUP PROFILE CARD WITH BIO &
the columns LINK

justify-evenly justify- Space before,

content: after and
space-evenly; between the
columns
are same 20.3 SOLUTION PROFILE CARD WITH BIO &
19.4 SHOPPING CART SUMMARY LINK

20.4 UNDERSTANDING ALIGN CONTENT IN

GRID

19.5 MARKUP SHOPPING CART SUMMARY The justify-* utilities control placement of columns
within container, while content-* utilities control
placement of rows within the container
Tailwind CSS Explanation
Class Property &
Value
content- align- All rows are placed at
19.6 SOLUTION SHOPPING CART SUMMARY start content: the beginning of the
flex-start; container
content- align- All rows are placed at
end content: the end of the contain
flex-end;
content- align- All rows are placed at
center content: the end
20.ALIGN CONTENT
center;
Page 22 of 32
content- align- All rows are spaced out
between content: as much as possible
space- with first row at the
between; beginning and last row
at
the end (We just saw
this in action)
content- align- Space before the rows
around content: and after the rows are
space- half as much as space 20.9 SOLUTION A SMALL VARIATION
around; between the rows
content- align- Space before, after
evenly content: and between the rows
space- are 20.9 BETTER SOLUTION A SMALL VARIATION
evenly; same
20.5 FEATURED LOGOS CENTER OF PAGE
20.10 UNDERSTANDING PLACE CONTENT IN
GRID

The place-content-* utilities allows you to control

the spacing of grid items along both the block and
inline axes at once. But this is possible only when
you want the placement of rows and columns to be
the same

20.6 MARKUP FEATURED LOGOS CENTER OF 21. JUSTIFY ITEMS

PAGE
21.1 FEATURED LOGOS OF DIFFERENT
WIDTHS

if you add some smaller or wider logos, you need to

center align the logos in each column.
20.7 SOLUTION FEATURED LOGOS CENTER OF
PAGE

21.2 MARKUP FEATURED LOGOS OF

DIFFERENT WIDTHS

20.8 A SMALL VARIATION

Page 23 of 32
21.3 SOLUTION FEATURED LOGOS OF
DIFFERENT WIDTHS

21.4 UNDERSTANDING JUSTIFY ITEMS

21.6 MARKUP PROFILE CARD WITH BIO &
The justify-items-* utilities allows us to horizontally
align the content within the columns, while the LINK CENTERED
previous utilities justify-* allows us to control
spacing of the entire columns. The available utilities
in Tailwind are:
Tailwind CSS Explanation
Class Property & 21.7 SOLUTION PROFILE CARD WITH BIO &
Value LINK CENTERED
justify- justify- All items are placed
items-start items: start; at the beginning of
them
columns 22. ALIGN ITEMS
(horizontally)
justify- justify- All items are placed 22.1 IMAGE AND TEXT SECTION
items-end items: end; at the end of their
columns
(horizontally)
justify- justify- All items are placed
items- items: at the center of
center center; them
columns
(horizontally)
justify- justify- The items are
items- items: stretched to occupy 22.2 MARKUP IMAGE AND TEXT SECTION
stretch stretch; full width of the
column if possible
21.5 PROFILE CARD WITH BIO & LINK
CENTERED
22.3 SOLUTION IMAGE AND TEXT SECTION

22.4 UNDERSTANDING ALIGN ITEMS IN GRID

Page 24 of 32
The items-* utilities allow us to vertically align the
content within the rows, while the previous
property content-* allowed us to control spacing of
entire rows.
22.7 SOLUTION FEATURED LOGOS OF
Tailwind CSS Explanation DIFFERENT HEIGHTS
Class Property &
Value
items- align-items: All items are
stretch stretch; stretched to fill the
container 23. PLACE ITEMS
items- align-items: All items are aligned
23.1 CENTER A DIV USING GRID
center center; to the center of the
Container
items- align-items: All items are aligned
start flex-start; to the beginning of
the
container (at the top
in case of the above 23.2 MARKUP CENTER A DIV USING GRID
example)
items-end align-items: All items are aligned
flex-end; to the end of the
container (at the
bottom in case of the
23.3 SOLUTION CENTER A DIV USING GRID
above example)
items- align-items: All items are
baseline baseline; positioned such that
the base
aligns to the end of
the container (will 23.4 UNDERSTANDING PLACE ITEMS
we The place-items-* utilities allows you to align the
talk about this soon) items horizontally within columns and vertically
within rows at once. we could use the place-items-*
22.5 FEATURED LOGOS OF DIFFERENT utilities. The available utilities are similar to that of
HEIGHTS justify-items-* and items-*.
24. GRID COLUMN START, END & SPAN

24.1 HORIZONTAL FORM

22.6 MARKUP FEATURED LOGOS OF

DIFFERENT HEIGHTS

Page 25 of 32
24.2 MARKUP HORIZONTAL FORM

23.6 MARKUP SINGLE PRICE GRID

COMPONENT

24.3 SOLUTION HORIZONTAL FORM

23.7 SOLUTION SINGLE PRICE GRID

COMPONENT

23.4 UNDERSTANDING COLUMN START

23.8 UNDERSTANDING COLUMN END

The utilities col-end-* is another set of grid item's

utilities. It specifies the item's end position. The
Tailwind utilities available for this are similar to col-
start-*. We can alternatively use another set of
utilities col-span-* which can be used to specify the
number of columns to span. This is usually used
All the grid related utilities we saw so far are applied along with either col-start-* or col-end-*.
to the grid container. Now, we will see a few that
So, another solution to the previous example can
are applied to the grid items. The col-start-* is one
be:
of them. It specifies the item's start position. Some
of the available Tailwind utilities for this are:
Tailwind CSS Property Explanation You can also skip the col-start-1 here:
Class & Value
col-start-1 grid-column- The item starts Or
start: 1; at column line 1
col-start-2 grid-column- The item starts
start: 2; at column line 2 Or

23.5 SINGLE PRICE GRID COMPONENT

23.9 UNDERSTANDING COLUMN SPAN

Page 26 of 32
The col-span-* utilities can be used on a grid item to
specify how many columns to span. This is usually
used along with either col-start-* or col-end-* . But
if used alone, the default start and end lines are
considered. The available utilities in Tailwind are
col-span-1 up to col-span-12 along with a helpful
col-span-full which makes the grid item span across
all the columns in the grid.
23.10 PAGE LAYOUT WITH GRID

25.2 SOLUTION GRID ROW

25.3 UNDERSTANDING ROW START AND ROW

23.11 MARKUP PAGE LAYOUT WITH GRID
END

The utilities row-start-* and row-end-* are also grid

item's properties. row-start-* specifies the item's
start position and row-end-* specifies the item's
end position with respect to row lines.
23.12 SOLUTION PAGE LAYOUT WITH GRID
25.4 UNDERSTANDING ROW SPAN

Similar to col-span-* utilities, we also have row-

span-* utilities for grid items to specify how many
rows to span. This is usually used along with either
row-start-* or row-end- *. But if used alone, the
25. GRID ROW default start and end lines are considered. The
available utilities in Tailwind are row-span-1 up to
row-span-12 along with a helpful row-span-full
which makes the grid item span across all the
columns in the grid.
25.5 RESPONSIVE SERVICES SECTION

25.1 MARKUP GRID ROW

Page 27 of 32
 25.8 TESTIMONIALS GRID SECTION

25.9 MARKUP TESTIMONIALS GRID SECTION

25.10 SOLUTION TESTIMONIALS GRID

SECTION

25.6 MARKUP RESPONSIVE SERVICES

26. ORDER
SECTION
we place the Popular plan first, followed by
Standard and Premium while keeping the order
same on desktop.

25.7 SOLUTION RESPONSIVE SERVICES

SECTION

Page 28 of 32
 27.2 HTML
26.1 MARKUP ORDER

27.3 SOLUTION PRICING PLANS WITH SIZE

26.2 SOLUTION ORDER
LIMITS
The. plan-highlight element is the popular plan that
There is no pure Tailwind solution for this. We can
we want to place first on mobile screens.
add a max-w- and min-w- to the. plan element itself
to limit the width of the cards. But then the column
26.3 UNDERSTANDING ORDER IN GRID width still remains large which makes it impossible
to center align the three cards together on larger
The same order utilities that we saw with respect to screens. So, here's the perfect solution:
flexbox can be used for grid items too. The value can
be any number - positive or negative. The items with
greater order value appear later on the web page
compared to the items with lesser value irrespective
of their appearance in the markup. If no order is
specified, by default the value is 0 for all the
elements and they follow the same order as they 27.4 UNDERSTANDING MINMAX()
appear in HTML. That's what happens at sm
breakpoint. The minmax() function takes in two parameters -
min and max. It specifies a size range greater than
27. ADVANCED GRID TEMPLATE VALUES or equal to min and less than or equal to max. Both
these values can be any length values in px , % , rem
27.1 PRICING PLANS WITH SIZE LIMITS
or even values like 1fr , min-content or max-content
.
27.5 BLOG POST PAGE WITH CODE SNIPPET

Page 29 of 32
When we set max-width full and overflow-scroll to
the pre-element we expect it to occupy a maximum
of
100% width and display a horizontal scrollbar.

27.6 SOLUTION BLOG POST PAGE WITH CODE 27.8 HTML RESPONSIVE GRID WITHOUT
SNIPPET MEDIA QUERIES

Now that the range is 0 to 1fr , it works fine. If none

of this makes sense, just remember one thing - 27.9 SOLUTION RESPONSIVE GRID WITHOUT
minmax(0, 1fr) is always a better option than 1fr . MEDIA QUERIES
Which is why, if you look at the Tailwind classes grid-
cols-* , their equivalent CSS values are:
Tailwind Class CSS Property & Value
grid-cols-1 grid-template-columns: If you find these arbitrary values too hard to read,
repeat(1, minmax(0, 1fr)); feel free to use custom CSS
grid-cols-2 grid-template-columns:
repeat(2, minmax(0, 1fr));
27.7 RESPONSIVE GRID WITHOUT MEDIA
QUERIES 27.10 UNDERSTANDING AUTO-FIT

Grid has a way to decide how many columns to The keyword auto-fit tells the browser to handle the
create based on the space available. But there's no number of columns and their sizes such that the
Tailwind solution for this too. We will be using elements will wrap when the width is not large
arbitrary values again. enough to fit them in without any overflow. The 1fr
in the second value of repeat ensures that in case
there's more space available
27.11 HOW THE BROWSER CALCULATES

To understand the above example better, assume

we have a screen width of 40rem. The container has
a padding of 2rem on left and right. you really need
not worry about all the above calculation. Ideally
you just need one CSS rule to create a responsive
grid layout of equally sized columns.

Page 30 of 32
 Tailwind CSS Property Explanation
Class & Value
Now consider a scenario where you have just one
blog post. grid-flow- grid-auto- The items get
row flow: row; placed one by
one filling one
27.12 UNDERSTANDING AUTO-FILL
row after the
auto-fit distributes the remaining space leaving no other
empty space in the row. auto-fill creates blank grid-flow-col grid-auto- The items get
columns of the same size as the items. This is very flow: column; placed one by
similar to auto-fit. You decide whether to use auto- one filling one
fit or auto-fill.
column after
28. GRID AUTO FLOW the other

28.1 ANALYTICS SECTION 29. JUSTIFY SELF & ALIGN SELF

29.1 RESTAURANT CARDS WITH LABELS

Let's say we need to list restaurants with name,

street, label and a picture just like the screenshot
below. You already know how this is done with
28.2 HTML ANALYTICS SECTION flexbox. Now let's see how to do this using grid.

28.3 SOLUTION ANALYTICS SECTION

29.2 MARKUP RESTAURANT CARDS WITH

LABELS

28.4 UNDERSTANDING GRID AUTO FLOW

The Tailwind equivalent for this property with value

row is grid-flow-row (The default) and for column is
grid-flow-col 29.3 SOLUTION RESTAURANT CARDS WITH
LABELS

Page 31 of 32
29.4 UNDERSTANDING JUSTIFY SELF AND This is a responsive services section in a grid format
ALIGN SELF from a template by Inovatik. On mobile screens, two
columns collapse into one. This a great example of
The utilities justify-self-* is used on a grid item. flexbox within a grid layout.
When the content of the item is smaller than the
width of the column, we can use this property to
control the alignment along the row axis (horizontal
direction). The utilities self-* is also used on a grid
item. When the content of the item is shorter than
the height of the row, we can use this property to
control the alignment along the block axis (vertical
direction). The available utilities are similar to that
of justify-items-* and items-*.
29.5 CAPTION AT THE BOTTOM OF IMAGE 30.2 TWITTER MONTHLY SUMMARY CARD

Here's an example where you wish to place a Look at this card with one month summary of a
caption with a transparent overlay on the image Twitter profile along with some profile info. This is a
sticking to the bottom. good example of flexbox and grid together in a
component.

29.6 MARKUP CAPTION AT THE BOTTOM OF

IMAGE
30.3 SOCIAL MEDIA DASHBOARD

29.7 SOLUTION CAPTION AT THE BOTTOM OF

IMAGE

CONCLUSION

Congratulations! & You have reached the end of

this book.
30 COMPREHENSIVE EXAMPLES FOR GRID &
FLEXBOX Thank you!

30.1 SERVICES SECTION

Page 32 of 32