The Layout That Broke Me

Spent 6 hours trying to center a div. Six. Hours.

Then someone showed me Flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

30 seconds. Problem solved.

Modern CSS is actually good. We just learned it wrong.

Flexbox: The One-Dimensional Layout King

Use Flexbox when:

• Items in single row or column
• Navigation bars
• Card layouts
• Centering things

Mental Model: Two axes - main axis (horizontal by default) and cross axis (vertical by default).

Essential Properties:

.container {
  display: flex;
  flex-direction: row;           /* or column */
  justify-content: center;       /* main axis */
  align-items: center;           /* cross axis */
  flex-wrap: wrap;               /* wrap to multiple lines */
  gap: 1rem;                     /* space between items */
}

.item {
  flex: 1;           /* grow to fill space */
  flex: 0 0 auto;    /* don't grow/shrink */
}

Real-World Example: Navigation Bar

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  gap: 2rem;
}

Logo left, nav middle, login right. All vertically centered.

Grid: The Two-Dimensional Layout Master

Use Grid when:

• Complex layouts with rows AND columns
• Dashboard layouts
• Image galleries
• Precise placement

Mental Model: Grid is a table of cells. Items can span multiple cells.

Essential Properties:

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.item {
  grid-column: span 2;
  grid-area: header;
}

Real-World Example: Responsive Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.gallery img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

Automatically fits as many 250px+ columns as possible. Magic.

Flexbox vs Grid

Use Flexbox:

• One-dimensional layouts (row OR column)
• Navigation bars
• Cards that wrap
• Centering content

Use Grid:

• Two-dimensional layouts (rows AND columns)
• Page layouts
• Dashboards
• Image galleries

Use Both:

.page {
  display: grid;           /* Overall page structure */
  grid-template-columns: 250px 1fr;
}

.navbar {
  display: flex;           /* Items within navbar */
  justify-content: space-between;
}

Modern Patterns

Sidebar Layout

.container {
  display: grid;
  grid-template-columns: minmax(200px, 250px) 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;  /* Pushes footer down */
}

Equal Height Columns

.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
/* All columns automatically same height! */

Common Pitfalls

1. Fighting the Default

/* DON'T: Add margins to flex items */
.item { margin-right: 1rem; }

/* DO: Use gap */
.container {
  display: flex;
  gap: 1rem;
}

2. Fixed Heights

/* DON'T: Fixed heights break responsiveness */
.card { height: 300px; }

/* DO: Let content determine height */
.card { min-height: 300px; }

Quick Reference

Flexbox:

display: flex;
flex-direction: row | column;
justify-content: center | space-between;
align-items: center | stretch;
gap: 1rem;
flex: 1;  /* grow */

Grid:

display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
grid-column: span 2;

---

CSS layouts don’t have to be painful. Flexbox and Grid are powerful once understood.

Remember:

• Flexbox for one dimension
• Grid for two dimensions
• Use both together
• Let the browser do the math

Stop fighting CSS. Learn these tools. Your layouts will go from hours to minutes.

Build something beautiful.