← Tailwind CSS & Bootstrap learning pathTailwind CSS & Bootstrap · Module 6 of 10
Tailwind layout: flex and grid
Lay out pages with flexbox and grid utilities.
📖 Key ideas
- flex, items-center, justify-between arrange items in a row.
- flex-col stacks items vertically.
- grid grid-cols-3 gap-4 creates a 3-column grid.
- w-full, max-w-5xl, mx-auto control width.
- Use space-y-4 or gap-4 for spacing between children.
💡 Real-life example: Flex is a queue of people in one line; grid is seats in a cinema with rows and columns.
flexEnables flexbox
justify-betweenSpreads items with space between
grid-cols-3Three equal grid columns
gap-4Space between flex/grid items