Tailwind CSS
/Intermediate
Grid vs Flexbox
Definition
Understanding the architectural differences between CSS Grid and Flexbox, and knowing exactly when to use each.
Explain Like I'm New
Rule of thumb: Use Flexbox for 1-Directional lines (Navbars, button rows, centering an icon). Use Grid for 2-Directional structural layouts (Dashboards, image galleries, complex forms).
Real World Example
A Navbar is a Flexbox. The actual whole webpage (Sidebar on left, Navbar on top, Content in middle) is a Grid.
Common Use Cases
- •Layout architecture choices
Terminal Output
bash / terminal
/*
THE PERFECT MARRIAGE OF GRID AND FLEXBOX:
1. We use GRID for the macro page layout (Sidebar + Main)
2. We use FLEXBOX for the micro component layout (Navbar items)
*/
<div class="grid grid-cols-12 h-screen">
<!-- Sidebar -->
<div class="col-span-2 bg-gray-900">...</div>
<!-- Main Content Area -->
<div class="col-span-10 flex flex-col">
<!-- Navbar (Flexbox inside the Grid!) -->
<nav class="flex justify-between items-center p-4 bg-white">
<span>Logo</span>
<span>Profile</span>
</nav>
<!-- Rest of page -->
<main class="flex-1 p-8">...</main>
</div>
</div>
Interview Questions
basic
- If you are just trying to vertically center a `div` inside another `div`, should you use Grid or Flexbox?
intermediate
- Can you put a Flexbox inside of a Grid cell?