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:
Items
Direction
| Class | CSS |
|---|
| flex-row | flex-direction: row |
| flex-row-reverse | flex-direction: row-reverse |
| flex-col | flex-direction: column |
| flex-col-reverse | flex-direction: column-reverse |
Wrapping
| Class | CSS |
|---|
| flex-no-wrap | flex-wrap: nowrap |
| flex-wrap | flex-wrap: wrap |
| flex-wrap-reverse | flex-wrap: wrap-reverse |
Align items
| Class | CSS |
|---|
| items-stretch | align-items: stretch |
| items-start | align-items: flex-start |
| items-center | align-items: center |
| items-end | align-items: flex-end |
| items-baseline | align-items: baseline |
Align content
| Class | CSS |
|---|
| content-start | align-content: flex-start |
| content-center | align-content: center |
| content-end | align-content: flex-end |
| content-between | align-content: space-between |
| content-around | align-content: space-around |
Align self
| Class | CSS |
|---|
| self-auto | align-self: auto |
| self-start | align-self: flex-start |
| self-center | align-self: center |
| self-end | align-self: flex-end |
| self-stretch | align-self: stretch |
Justify content
| Class | CSS |
|---|
| justify-start | justify-content: flex-start |
| justify-center | justify-content: center |
| justify-end | justify-content: flex-end |
| justify-between | justify-content: space-between |
| justify-around | justify-content: space-around |
Flex, grow, shrink
| Class | CSS |
|---|
| flex-initial | flex: initial |
| flex-1 | flex: 1 |
| flex-auto | flex: auto |
| flex-none | flex: none |
| flex-grow | flex-grow: 1 |
| flex-shrink | flex-shrink: 1 |
| flex-no-grow | flex-grow: 0 |
| flex-no-shrink | flex-shrink: 0 |
Lessons in this unit: