Flexbox and Grid

🧑‍🏫 Sabse pehle — simple mein samjho#

Layout banane ke liye pehle float use hota tha jo bohot dard deta tha. Ab humare paas Flexbox aur Grid hain. Tailwind mein inko use karna bohot asaan hai. Bas parent div ko flex class do, aur elements apne aap ek line (row) mein aa jayenge. Agar unhe columns mein dalna hai to grid aur grid-cols-3 use karlo. Inke sath justify (x-axis) aur items (y-axis) use karke alignment set kar sakte ho.

Flexbox#

Flexbox is ideal for one-dimensional layouts (either rows OR columns).

Enabling Flexbox#

Apply the flex class to the parent container. By default, this sets the direction to row (horizontal). To change it to vertical, use flex-col.

Alignment and Justification#

• Horizontal Alignment (Justify):
  • justify-start (Default)
  • justify-center
  • justify-end
  • justify-between (Pushes items to the edges)
• Vertical Alignment (Items):
  • items-start
  • items-center
  • items-end
  • items-stretch (Default)

Flex Children Properties#

• flex-1 (Allows the item to grow and consume all available remaining space)
• flex-none (Prevents the item from growing or shrinking)
• flex-wrap (Allows items to drop to a new line if they run out of horizontal space)

<!-- Flexbox Navigation Example -->
<nav class="flex items-center justify-between p-4 bg-white rounded-xl shadow-md border border-gray-100">
  <div class="flex items-center gap-2">
    <div class="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-bold">L</div>
    <span class="font-bold text-gray-800 tracking-tight">Logo</span>
  </div>
  <ul class="flex items-center gap-6 m-0">
    <li class="font-medium text-indigo-600 cursor-pointer">Home</li>
    <li class="font-medium text-gray-500 hover:text-gray-900 transition cursor-pointer">About</li>
    <li class="font-medium text-gray-500 hover:text-gray-900 transition cursor-pointer">Contact</li>
  </ul>
  <button class="px-4 py-2 bg-indigo-50 text-indigo-700 font-semibold rounded-lg hover:bg-indigo-100 transition">
    Sign In
  </button>
</nav>

CSS Grid#

CSS Grid is ideal for two-dimensional layouts (managing both rows AND columns simultaneously).

Enabling Grid#

Apply the grid class to the parent container.

Defining Columns#

• grid-cols-2 (Creates 2 equal-width columns)
• grid-cols-4 (Creates 4 equal-width columns)

Spanning Columns (Child elements)#

If you want a specific child element to take up more than one column slot:

• col-span-2 (Takes up 2 columns)
• col-span-full (Takes up the entire row)

The Gap Property#

Always use gap- classes with grid to create clean spacing between your grid items.

<!-- Grid Gallery Example (Try changing grid-cols-3 to grid-cols-2 or grid-cols-4) -->
<div class="grid grid-cols-3 gap-4 bg-gray-50 p-6 rounded-xl border border-gray-200">
  <div class="bg-indigo-200 h-32 rounded-lg flex items-center justify-center text-indigo-700 font-bold shadow-sm">1</div>
  <div class="bg-purple-200 h-32 rounded-lg flex items-center justify-center text-purple-700 font-bold shadow-sm">2</div>
  <div class="bg-pink-200 h-32 rounded-lg flex items-center justify-center text-pink-700 font-bold shadow-sm">3</div>
  <div class="bg-blue-200 h-32 col-span-2 rounded-lg flex items-center justify-center text-blue-700 font-bold shadow-sm text-lg">4 (col-span-2)</div>
  <div class="bg-teal-200 h-32 rounded-lg flex items-center justify-center text-teal-700 font-bold shadow-sm">5</div>
</div>