Layouts

Overview

Detailed Explanation

Practical Steps

1. 1
   Flexbox Basics: Aligning a Header 5 mins

   Align a logo to the left and a menu to the right instantly using Flexbox.

   • Wrap elements in a header div
   • Apply display: flex
   • Use justify-content to spread them apart

   <style>
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #1f2937;
     color: white;
     padding: 10px 20px;
   }
   .menu { display: flex; gap: 15px; }
   </style>
   
   <div class="header">
     <h2>MyLogo</h2>
     <div class="menu">
       <span>Home</span>
       <span>About</span>
     </div>
   </div>

2. 2
   Grid Basics: A Responsive Card Gallery 5 mins

   Create a 3-column grid that automatically drops to 1 column on smaller screens.

   • Use display: grid
   • Use the magic 'auto-fit' and 'minmax' formula

   <style>
   .grid-container {
     display: grid;
     /* The magic line that creates responsive columns */
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 16px;
   }
   .card { border: 1px solid #ccc; padding: 20px; }
   </style>
   <div class="grid-container">
     <div class="card">Item 1</div>
     <div class="card">Item 2</div>
     <div class="card">Item 3</div>
     <div class="card">Item 4</div>
   </div>

Frequently Asked Questions

Flexbox vs Grid... which one should I actually use?

Think of it this way: If you want to line things up in a single row OR a single column (1D), use Flexbox. That's for headers, nav bars, and buttons. If you're building a 2D layout like a chessboard or a photo gallery, use Grid. Easy!

My flex items refuse to shrink and text overflows off the screen!

Ah, the 'I refuse to shrink' CSS trap. Flex items try to be as wide as their content by default. Add `min-width: 0;` to the flex child elements. It forces them to swallow their pride and shrink/wrap the text properly.

Is using 'float: left' to align things totally dead?

Stone dead. We used to write spaghetti code with 'clearfix' hacks just to put two boxes next to each other. Today, Flexbox and Grid do it in one line. The only time you should ever use float is if you genuinely want text to wrap around an image like in a newspaper.

Writing tons of @media queries for mobile responsive design is exhausting.

I feel your pain. The good news is, modern CSS properties like Flex's `flex-wrap: wrap;` and Grid's `repeat(auto-fit, minmax(200px, 1fr));` let the browser handle the math. You can often build fully responsive mobile layouts without writing a single media query. It's basically magic.

Flex vs Grid?

Flex for one axis; Grid for two-dimensional layouts.

Need Bootstrap?

Not required—native Flex/Grid covers most production UI.