Design

Modern CSS Techniques: Mastering Grid and Flexbox

Portrait of Iurii Okhmat

Iurii Okhmat

· 13 min read

Colorful geometric grid pattern representing CSS layouts

CSS layout has evolved dramatically. With Grid and Flexbox now having excellent browser support, creating complex layouts is more intuitive than ever. Let's master these essential tools.

Flexbox vs Grid: When to Use Which#

Flexbox is for one-dimensional layouts. Grid is for two-dimensional layouts.

— Rachel Andrew, CSS Grid Expert

Rendering diagram...

Flexbox Fundamentals#

The Flex Container#

CSS
.container {
    display: flex;
    flex-direction: row; /* row | row-reverse | column | column-reverse */
    justify-content: center; /* Controls main axis alignment */
    align-items: center; /* Controls cross axis alignment */
    gap: 1rem; /* Space between items */
}

Main Axis Alignment (justify-content)#

Rendering diagram...

Practical Example: Navigation Bar#

HTML
<nav class="navbar">
    <a href="/" class="logo">Brand</a>
    <ul class="nav-links">
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
    <button class="cta-button">Get Started</button>
</nav>
CSS
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--color-bg-surface);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* On mobile, stack vertically */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
    }
}

Flex Item Properties#

CSS
.item {
    flex-grow: 1;   /* How much item should grow relative to others */
    flex-shrink: 1; /* How much item should shrink relative to others */
    flex-basis: auto; /* Initial size before growing/shrinking */

    /* Shorthand */
    flex: 1 1 auto; /* grow shrink basis */
    flex: 1; /* Same as flex: 1 1 0% */
}

CSS Grid Fundamentals#

Defining a Grid#

CSS
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto 1fr auto; /* Header, main, footer */
    gap: 1.5rem;
    min-height: 100vh;
}

Grid Template Areas#

One of Grid's most powerful features for readable layouts:

CSS
.page-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
    grid-template-columns: 250px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

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

Responsive Grid Patterns#

Auto-Fill vs Auto-Fit#

CSS
/* Auto-fill: Creates as many columns as fit, even if empty */
.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

/* Auto-fit: Same, but collapses empty columns */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

Card Grid Layout#

HTML
<div class="card-grid">
    <article class="card">...</article>
    <article class="card">...</article>
    <article class="card featured">...</article>
    <article class="card">...</article>
</div>
CSS
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Featured card spans 2 columns on larger screens */
@media (min-width: 768px) {
    .card.featured {
        grid-column: span 2;
    }
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card-content {
    flex: 1; /* Push footer to bottom */
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border-subtle);
}

Advanced Techniques#

Subgrid#

Subgrid allows nested grids to align with parent grid tracks:

CSS
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3; /* Card spans 3 row tracks */
}

Container Queries#

Style elements based on their container's size, not the viewport:

CSS
.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
    }

    .card-image {
        grid-row: span 2;
    }
}

@container card (max-width: 399px) {
    .card {
        display: flex;
        flex-direction: column;
    }
}

CSS Grid for Form Layouts#

CSS
.form-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1rem 1.5rem;
    align-items: center;
}

.form-grid label {
    text-align: right;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
    width: 100%;
}

/* Full-width elements */
.form-grid .full-width {
    grid-column: 1 / -1;
}

/* Button group at the end */
.form-grid .actions {
    grid-column: 2;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

Common Layout Patterns#

Holy Grail Layout#

CSS
.holy-grail {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
    min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.footer { grid-column: 1 / -1; }
.nav { grid-column: 1; }
.main { grid-column: 2; }
.aside { grid-column: 3; }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
    }

    .nav, .main, .aside {
        grid-column: 1;
    }
}
CSS
.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* OR with Flexbox */
.page-flex {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-flex main {
    flex: 1;
}

Centering (The Ultimate Guide)#

CSS
/* Flexbox centering */
.center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Grid centering (shortest!) */
.center-grid {
    display: grid;
    place-items: center;
}

/* Grid centering (alternative) */
.center-grid-alt {
    display: grid;
    place-content: center;
}

Expert Tips from the Community#

Here's a great tip about CSS Grid from the community:

"Stop using flexbox for everything. Grid isn't just for page layouts—it's perfect for component layouts too. The moment you need alignment in two dimensions, reach for Grid."

— CSS Tricks

Debugging Tools#

Firefox Grid Inspector#

Firefox has the best Grid debugging tools. Enable them in DevTools:

  1. Open DevTools (F12)
  2. Click the "grid" badge next to display: grid elements
  3. Customize overlay colors, line numbers, area names

Chrome Grid Tools#

Chrome's grid overlay shows:

  • Grid lines and track sizes
  • Gap visualization
  • Area names (if defined)

Performance Considerations#

  1. Avoid layout thrashing: Batch DOM reads and writes
  2. Use will-change sparingly: Only for frequently animated properties
  3. Prefer Grid for complex layouts: It's often more performant than nested Flexbox
  4. Use contain: layout: Isolate layout calculations for complex components
CSS
.isolated-component {
    contain: layout style;
}

Browser Support#

Both Flexbox and Grid have excellent browser support:

FeatureChromeFirefoxSafariEdge
Flexbox29+28+9+12+
Grid57+52+10.1+16+
Subgrid117+71+16+117+
Container Queries105+110+16+105+

Further Learning#

Mastering Flexbox and Grid opens up endless possibilities for creating beautiful, responsive layouts. Start with simple patterns and gradually incorporate more advanced techniques as you become comfortable.

#css #web design #frontend #layout
Share:

Related Articles

Abstract geometric shapes representing design system components

Design Systems: The Foundation of Consistent UI

Learn how to build and maintain a design system that scales with your team and product, from tokens to components.

Color wheel with UI elements overlaid

The Science of Color in UI Design

Understanding color theory, psychology, and accessibility to create interfaces that are both beautiful and usable.

Futuristic CSS code visualization

Understanding CSS Architecture: Part 3 - Modern Features

How CSS Container Queries, :has(), and other modern features change how we architect stylesheets.