Tailwind CSS: Flexbox and Grid in Tailwind

Using CSS Grid is easy with Tailwind.

Use the grid class to set a container class to use CSS Grid for its children.

Then you can set for example the grid to have 3 columns using grid-cols-3.

And a gap between elements using gap-3

Same for Flexbox.

Use the flex class, then you can set flex-col to position elements vertically, for example.

And you have a ton of classes to work with, to apply any flexbox property you may want to use:



flex-rowflex-direction: row
flex-row-reverseflex-direction: row-reverse
flex-colflex-direction: column
flex-col-reverseflex-direction: column-reverse


flex-no-wrapflex-wrap: nowrap
flex-wrapflex-wrap: wrap
flex-wrap-reverseflex-wrap: wrap-reverse

Align items

items-stretchalign-items: stretch
items-startalign-items: flex-start
items-centeralign-items: center
items-endalign-items: flex-end
items-baselinealign-items: baseline

Align content

content-startalign-content: flex-start
content-centeralign-content: center
content-endalign-content: flex-end
content-betweenalign-content: space-between
content-aroundalign-content: space-around

Align self

self-autoalign-self: auto
self-startalign-self: flex-start
self-centeralign-self: center
self-endalign-self: flex-end
self-stretchalign-self: stretch

Justify content

justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around

Flex, grow, shrink

flex-initialflex: initial
flex-1flex: 1
flex-autoflex: auto
flex-noneflex: none
flex-growflex-grow: 1
flex-shrinkflex-shrink: 1
flex-no-growflex-grow: 0
flex-no-shrinkflex-shrink: 0

Lessons this unit:

0: Introduction
1: Box model properties
2: Colors
3: Typography
4: ▶︎ Flexbox and Grid in Tailwind
5: Modifiers
6: Responsive design in Tailwind