[Web Dev] Day 5: HTML Code (CSS Grid)

📅 Date: March 3, 2026

🧠 Mood: The Architect 🏗️

🔥 Topic: Web Dev Day 5: CSS Grid (The 2D Matrix)

🚧 Where Flexbox Fails

Yesterday, I was praising CSS Flexbox like it was the ultimate solution to all layout problems. And for a moment, I truly believed it was. But today, I hit a massive roadblock while trying to build a simple photo gallery layout.

I wanted a layout with exactly three columns of images. If I added a fourth image, I wanted it to perfectly snap into the next row directly beneath the first image. I tried doing this with Flexbox using flex-wrap, but the math kept getting messy. The items would stretch awkwardly, and the alignment wasn't perfectly symmetrical.

That is when I realized the brutal truth: Flexbox is one-dimensional. It is designed to lay things out in a single row OR a single column. It doesn't care about the relationship between items in different rows. To build a true matrix—a proper layout with perfectly aligned rows and columns simultaneously—you need CSS Grid.

---

📐 Thinking in Rows and Columns

If Flexbox is like placing items on a single shelf, CSS Grid is like building an Excel spreadsheet. You explicitly define how many columns you want and how wide they should be.

When I first looked at CSS Grid syntax, it looked incredibly intimidating. Words like grid-template-columns and fr units (fractions) made no sense to my brain, which was just getting used to pixels and percentages. But once you write it out, it becomes remarkably intuitive.

1. The Magical 'fr' Unit

Instead of calculating percentages (like 33.33% for three columns), Grid introduces the fractional unit (fr). If you want three equal columns, you simply tell the browser to give 1 fraction of the available space to each column. The browser handles all the complex math for you.

2. The Grid Gap

In the past, adding space between boxes meant messing around with margins and accidentally breaking the layout because the total width exceeded 100%. Grid has a built-in gap property. You just type gap: 20px; and it perfectly places 20 pixels of empty space between all your rows and columns, without pushing your items outside the container.

---

💻 The 3-Column Code Snippet

Here is the exact code I used to finally solve my photo gallery problem. Notice how clean and short the CSS is compared to older techniques.

.gallery-container {
    display: grid; /* Enables CSS Grid */
    
    /* Creates 3 columns of exactly equal width */
    grid-template-columns: 1fr 1fr 1fr; 
    
    /* Adds perfect 15px spacing between all items */
    gap: 15px; 
}

The moment I applied this class to my parent container, all my child divs instantly snapped into a perfect, uniform 3x3 grid. No messy margin calculations, no floating elements. Just pure geometric perfection.

---

🎯 What's Next?

Flexbox is for aligning things in a single line. Grid is for building the overall page structure. Tomorrow, I will dive into Media Queries to learn how to make this grid change shape when viewed on a small mobile phone versus a large desktop monitor.