Flexbox & CSS Grid - Modern Layout Systems

Modern Layout Systems

Master Flexbox and CSS Grid - The two most powerful layout systems in modern CSS. Learn when to use each and how to combine them for optimal web layouts.

📐 Flexbox - One-dimensional layouts

🔲 CSS Grid - Two-dimensional layouts

⚡ Responsive Design

🎯 Real-world Examples

Flexbox Layout System

Flexbox (Flexible Box Layout) is a one-dimensional layout model for distributing space along a single axis (either horizontally or vertically). It's perfect for arranging items in a row or column, with powerful alignment and distribution capabilities.

Flex Container and Items

Main Axis

Cross Axis

Item 1

Item 2

Item 3

Item 4

➡️ flex-direction

Defines the direction of the main axis (row, row-reverse, column, column-reverse).

.container { flex-direction: row; /* Default */ }

↔️ justify-content

Aligns items along the main axis (flex-start, center, flex-end, space-between, space-around, space-evenly).

.container { justify-content: center; }

↕️ align-items

Aligns items along the cross axis (stretch, flex-start, center, flex-end, baseline).

.container { align-items: center; }

🔄 flex-wrap

Controls whether items wrap onto multiple lines (nowrap, wrap, wrap-reverse).

.container { flex-wrap: wrap; }

📈 flex-grow

Defines how much a flex item will grow relative to other items. Accepts unitless value.

.item { flex-grow: 1; }

📉 flex-shrink

Defines how much a flex item will shrink relative to other items. Default is 1.

.item { flex-shrink: 0; /* Won't shrink */ }

Real-world Flexbox Examples

🧭 Navigation Bar

Logo

Home About Services Contact

💬 Chat Interface

Hello! How are you?

I'm good, thanks! How about you?

📱 Card Layout

Card 1

Flexible card that grows and shrinks

Card 2

Takes twice the space of other cards

/* Complete Flexbox Example */
/* Flex Container */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #1e293b;
}

/* Flex Items with different properties */
.nav-logo {
    flex-shrink: 0; /* Won't shrink */
}

.nav-menu {
    display: flex;
    gap: 30px;
    flex-grow: 1;
    justify-content: center;
}

.nav-button {
    flex-shrink: 0;
    padding: 10px 25px;
    background: #6366f1;
    color: white;
    border-radius: 6px;
}

/* Responsive Card Layout */
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    min-width: 250px;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
            

CSS Grid Layout System

CSS Grid is a two-dimensional layout system that can handle both rows and columns simultaneously. It's perfect for complex layouts like dashboards, magazine layouts, and any design that requires precise control over both axes.

Grid Container and Items

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

📐 grid-template-columns

Defines the columns of the grid with track sizes (fr, px, %, auto, minmax(), repeat()).

.container { grid-template-columns: 1fr 2fr 1fr; }

📏 grid-template-rows

Defines the rows of the grid with track sizes.

.container { grid-template-rows: 100px auto 100px; }

🔲 grid-template-areas

Creates named grid areas for visual layout structure.

.container { grid-template-areas: "header header" "sidebar content" "footer footer"; }

↔️ justify-items

Aligns grid items along the row axis (start, end, center, stretch).

.container { justify-items: center; }

↕️ align-items

Aligns grid items along the column axis (start, end, center, stretch).

.container { align-items: center; }

📍 grid-column & grid-row

Positions grid items on specific columns/rows using line numbers.

.item { grid-column: 1 / 3; grid-row: 1 / 2; }

Real-world Grid Examples

📰 Magazine Layout

Featured Article

Main content area spanning two rows

Sidebar 1

Sidebar 2

📊 Dashboard

Chart 1

Metric 1

Metric 2

Data Table

Activity

🖼️ Gallery Layout

/* Complete Grid Example */
/* Grid Container */
.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-rows: 80px 1fr 100px;
    grid-template-areas:
        "sidebar header header"
        "sidebar main sidebar2"
        "sidebar footer footer";
    gap: 20px;
    height: 100vh;
}

/* Grid Area Placement */
.header {
    grid-area: header;
    background: #1e293b;
}

.sidebar {
    grid-area: sidebar;
    background: #0f172a;
}

.main {
    grid-area: main;
    background: white;
    padding: 30px;
}

/* Responsive Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gallery-item {
    aspect-ratio: 1;
    background: #f8fafc;
    border-radius: 12px;
    overflow: hidden;
}

/* Media Queries for Responsive Grid */
@media (max-width: 1024px) {
    .dashboard {
        grid-template-columns: 200px 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar main"
            "sidebar footer";
    }
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "main"
            "footer";
    }
}
            

Flexbox vs CSS Grid: When to Use Each

📐 Use Flexbox When...

You need one-dimensional layouts (row OR column)
You want to distribute space along a single axis
You need precise alignment control in one direction
You're working with navigation bars, menus, or form controls
You need to align items within a container (vertically or horizontally)
You want items to wrap naturally based on content size

🔲 Use CSS Grid When...

You need two-dimensional layouts (rows AND columns)
You want precise control over both axes simultaneously
You're creating complex layouts like dashboards or magazines
You need items to overlap or layer on top of each other
You want to create responsive layouts with minimal media queries
You need named template areas for better code readability

Best Practices for Combining Both

Rule of thumb: Use Grid for the overall page layout (macro layout) and Flexbox for the components inside those grid areas (micro layout).

/* Combined Example: Grid for layout, Flexbox for components */
.page-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px 1fr 100px;
    min-height: 100vh;
}

/* Flexbox inside Grid areas */
.header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Grid for main content layout */
.main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px;
}

/* Flexbox for cards inside grid */
.card {
    display: flex;
    flex-direction: column;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
                

Interactive Layout Playground

Experiment with Flexbox and CSS Grid properties in real-time. Modify the code below and see the results instantly. Try creating different layouts and see how the properties affect the display.

CSS Editor

Live Preview

Challenges to Try:

Challenge 1: Centered Navigation

Create a navigation bar with logo on left, menu items centered, and button on right using Flexbox.

Challenge 2: Holy Grail Layout

Create the classic holy grail layout (header, footer, sidebar, main content) using CSS Grid.

Challenge 3: Responsive Gallery

Create an image gallery that automatically adjusts columns based on screen width using auto-fit and minmax().