Flexbox & Grid

Flexbox and CSS Grid are the most powerful tools for creating modern, responsive layouts.

Flexbox

Flexbox is perfect for creating flexible, one-dimensional layouts.

Getting Started with Flexbox

.container {
    display: flex;
}

Main Concepts

Container - The parent element (display: flex) Items - The children inside the container

<div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
</div>

.flex-container {
    display: flex;
}

.flex-item {
    flex: 1;  /* Equal width */
}

Flex Direction

Controls the direction of items (row or column)

.container {
    display: flex;
    flex-direction: row;        /* Left to right (default) */
    flex-direction: row-reverse; /* Right to left */
    flex-direction: column;      /* Top to bottom */
    flex-direction: column-reverse; /* Bottom to top */
}

Justify Content

Aligns items along the main axis (horizontally in row direction)

.container {
    display: flex;
    justify-content: flex-start;    /* Items at the start (default) */
    justify-content: flex-end;      /* Items at the end */
    justify-content: center;        /* Items centered */
    justify-content: space-between; /* Space between items */
    justify-content: space-around;  /* Space around items */
    justify-content: space-evenly;  /* Equal space everywhere */
}

Align Items

Aligns items along the cross axis (vertically in row direction)

.container {
    display: flex;
    align-items: flex-start;   /* Items at the start */
    align-items: flex-end;     /* Items at the end */
    align-items: center;       /* Items centered */
    align-items: stretch;      /* Items stretch to fill height (default) */
    align-items: baseline;     /* Items aligned by text baseline */
}

Flex Wrap

Controls whether items wrap to next line

.container {
    display: flex;
    flex-wrap: nowrap;   /* Items stay on one line (default) */
    flex-wrap: wrap;     /* Items wrap to next line */
    flex-wrap: wrap-reverse; /* Items wrap in reverse */
}

Flex Item Properties

Flex Grow

Controls how much an item grows to fill space

.item {
    flex-grow: 0;  /* Don't grow (default) */
    flex-grow: 1;  /* Grow equally */
    flex-grow: 2;  /* Grow twice as much */
}

Flex Shrink

Controls how much an item shrinks if space is tight

.item {
    flex-shrink: 1;  /* Shrink equally (default) */
    flex-shrink: 0;  /* Don't shrink */
    flex-shrink: 2;  /* Shrink twice as much */
}

Flex Basis

Sets the base size before growing/shrinking

.item {
    flex-basis: 200px;     /* Base width of 200px */
    flex-basis: 30%;       /* Base width of 30% */
    flex-basis: auto;      /* Use content width (default) */
}

Flex Shorthand

Combines grow, shrink, and basis

.item {
    flex: 1;           /* grow: 1, shrink: 1, basis: 0 */
    flex: 1 1 200px;   /* grow: 1, shrink: 1, basis: 200px */
    flex: 0 1 auto;    /* Don't grow, shrink, auto size */
}

Real-World Flexbox Example

Navigation bar:

<style>
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 30px;
        background-color: navy;
        color: white;
    }
    
    .logo {
        font-weight: bold;
        font-size: 20px;
    }
    
    .nav-links {
        display: flex;
        gap: 20px;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .nav-links a {
        color: white;
        text-decoration: none;
    }
    
    .nav-links a:hover {
        color: lightblue;
    }
</style>

<nav class="navbar">
    <div class="logo">MyBrand</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS Grid

Grid is perfect for creating two-dimensional layouts.

Getting Started with Grid

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
    grid-template-rows: auto;            /* Rows auto-fit content */
    gap: 20px;                           /* Space between items */
}

Grid Terminology

Grid Container - Parent with display: grid Grid Items - Children inside the container Tracks - Rows and columns Cells - Intersection of row and column Lines - Dividing lines between tracks

Defining Columns and Rows

.container {
    display: grid;
    
    /* Fixed sizes */
    grid-template-columns: 200px 300px 200px;
    
    /* Flexible units (fr) */
    grid-template-columns: 1fr 2fr 1fr;  /* Ratio: 1:2:1 */
    
    /* Mix of units */
    grid-template-columns: 200px 1fr 300px;
    
    /* Repeat function */
    grid-template-columns: repeat(3, 1fr);      /* 3 equal columns */
    grid-template-columns: repeat(auto-fit, 300px); /* Responsive */
    
    /* Rows */
    grid-template-rows: 100px auto 50px;
}

Gap

Controls space between items

.container {
    gap: 20px;           /* Same space on all sides */
    gap: 20px 30px;      /* Row gap 20px, Column gap 30px */
    row-gap: 20px;       /* Vertical space */
    column-gap: 30px;    /* Horizontal space */
}

Grid Item Properties

Grid Column

Controls which columns an item spans

.item {
    grid-column: 1;           /* Start at column 1 */
    grid-column: 1 / 3;       /* Span from column 1 to 3 */
    grid-column: 1 / span 2;  /* Span 2 columns starting at 1 */
}

Grid Row

Controls which rows an item spans

.item {
    grid-row: 1 / 3;       /* Span from row 1 to 3 */
    grid-row: 1 / span 2;  /* Span 2 rows */
}

Real-World Grid Example

Magazine layout:

<style>
    .magazine {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .header {
        grid-column: 1 / -1;  /* Span all columns */
        background-color: navy;
        color: white;
        padding: 40px;
        text-align: center;
        border-radius: 8px;
    }
    
    .featured {
        grid-column: 1 / 3;   /* Span 2 columns */
        grid-row: 2 / 4;      /* Span 2 rows */
    }
    
    .sidebar {
        grid-column: 3;
        grid-row: 2 / 4;
    }
    
    .article {
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 8px;
    }
</style>

<div class="magazine">
    <div class="header">
        <h1>Tech Magazine</h1>
    </div>
    
    <article class="featured article">
        <h2>Featured Article</h2>
        <p>This is the main featured article...</p>
    </article>
    
    <article class="sidebar article">
        <h3>Latest News</h3>
        <p>Quick updates...</p>
    </article>
    
    <article class="article">
        <h3>Article 1</h3>
        <p>Content here...</p>
    </article>
    
    <article class="article">
        <h3>Article 2</h3>
        <p>Content here...</p>
    </article>
</div>

Flexbox vs Grid

Feature	Flexbox	Grid
Dimensions	One-dimensional	Two-dimensional
Use Case	Navigation, buttons, lists	Page layouts, dashboards
Best For	Linear layouts	Complex layouts
Alignment	Along one axis	Along both axes
Example	Navigation bar	Dashboard grid

When to Use What

Use Flexbox When:

• Creating navigation menus
• Aligning buttons in a row
• Creating a sidebar layout
• Distributing items equally
• Items flow in one direction

Use Grid When:

• Creating page layouts
• Building dashboard layouts
• Creating image galleries
• Aligning items in rows AND columns
• Complex multi-dimensional layouts

Modern Best Practice

Use both together:

<style>
    .page {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 20px;
    }
    
    .header {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
</style>

Next Steps

Master Flexbox and Grid, then learn:

1. Responsive Design - Mobile-first layouts
2. Styling & Typography - Colors and fonts
3. Animations & Transitions - Add motion