1. Flexbox (1-Dimensional)
Use Flexbox when you want to align items in a single row or column. It is “content-first,” meaning the items decide how much space they take.
flex-col: Stacks items vertically.items-center: Centers items on the Cross Axis (horizontally ifflex-col, vertically ifflex-row).justify-evenly: Distributes space around items on the Main Axis.space-y-4: A helper class that adds margin between children (avoids margin on the very top/bottom).
<div class="flex flex-col items-center justify-evenly space-y-4">
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
<div class="h-16 w-16 rounded-full bg-orange-500"></div>
<div class="h-16 w-16 rounded-full bg-green-500"></div>
</div>2. Grid (2-Dimensional)
Use Grid when you want a strict layout. It is “container-first,” meaning the parent defines the tracks and the children must fit into them.
grid-cols-3: Creates 3 columns of equal width.gap-2: The modern way to space items (works for both rows and columns).col-span-x: (Bonus) You can make one item take up more space (e.g.,col-span-2).
<div class="grid grid-cols-3 gap-2">
<div class="h-16 rounded-full bg-blue-500"></div>
<div class="h-16 rounded-full bg-orange-500"></div>
<div class="h-16 rounded-full bg-green-500"></div>
</div>