CSS Grid & Flexbox

CSS layouts used to be a nightmare. Floats, clearfixes, negative margins—it's a wonder any of us survived. Then came Flexbox and Grid, and everything got so much better.

Here's the simple rule: Flexbox for one dimension (a row OR a column). Grid for two dimensions (rows AND columns). That's it.

Flexbox: One Dimensional

Flexbox is perfect when you have items in a single line and want to arrange them. Navigation bars. Button groups. Centering things (finally!).

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

Let's break it down:

• justify-content - positions items horizontally (the main axis)
• align-items - positions items vertically (the cross axis)
• gap - space between items

The main axis is however your items flow. If you have flex-direction: row (default), main axis is horizontal. If flex-direction: column, it's vertical.

Common Values

justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | stretch

space-between puts equal space between items. space-around puts equal space around each item (so outer items have half as much space on the edges).

Grid: Two Dimensional

Grid is for when you need both rows and columns. Page layouts. Photo galleries. Anything that needs to be in a proper table-like structure.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

The fr Unit

1fr means "one fraction" of available space. So 1fr 2fr 1fr gives you four equal parts—the middle gets two, the sides get one each.

/* Three equal columns */
grid-template-columns: 1fr 1fr 1fr;

/* Sidebar (300px) + main content (fills rest) */
grid-template-columns: 300px 1fr;

Making It Responsive Without Media Queries

This is the magic trick that solves most responsive layout problems:

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

Read this as: "make columns that are at least 250px wide, but stretch to fill space. Fit as many as you can."

This automatically wraps to new lines on smaller screens. No media queries needed.

Centering: The Old Way vs Flexbox

Remember when centering was a joke? People made memes about it?

/* The easy way */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

That's it. Vertically and horizontally centered. Four lines of code. Works in every modern browser.

Grid Areas: Name Your Layout

There's a trick where you name your layout areas and place items by name. It's weird but kind of cool:

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Visualize your whole layout in the template-areas property. It's kind of fun.

Use Both Together

Here's the secret: use Grid for page structure, Flexbox for pieces inside. They're not competitors—they work together.

Grid handles the overall layout. Flexbox handles the navigation inside your header. Grid handles the blog post layout. Flexbox handles the author bio at the bottom.

That's the real workflow.