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 in 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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!