CSS Align & Position Enhancements

🎯 Modern Layout Systems

CSS3 introduced Flexbox and Grid, revolutionizing how we create layouts. These powerful tools make alignment, distribution, and responsive design much easier than traditional methods.

Modern Layout Benefits:

✅ Easy vertical and horizontal alignment
✅ Responsive layouts without media queries
✅ Equal height columns automatically
✅ Flexible item ordering
✅ Space distribution between items
✅ Two-dimensional layouts with Grid

📦 Flexbox Basics

Flexbox is a one-dimensional layout system for arranging items in rows or columns.

Creating a Flex Container:

/* Make element a flex container */
.container {
    display: flex;
}

/* Flex direction */
flex-direction: row;           /* Default: left to right */
flex-direction: row-reverse;   /* Right to left */
flex-direction: column;        /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */

Flex Direction Examples:

Row (default):

1

2

3

Column:

1

2

3

↔️ Justify Content (Main Axis)

Controls alignment along the main axis (horizontal in row, vertical in column).

/* Main axis alignment */
justify-content: flex-start;    /* Start (default) */
justify-content: flex-end;      /* End */
justify-content: center;        /* Center */
justify-content: space-between; /* Equal space between */
justify-content: space-around;  /* Equal space around */
justify-content: space-evenly;  /* Equal space everywhere */

Justify Content Examples:

center:

1

2

3

space-between:

1

2

3

space-evenly:

1

2

3

↕️ Align Items (Cross Axis)

Controls alignment along the cross axis (vertical in row, horizontal in column).

/* Cross axis alignment */
align-items: stretch;      /* Default: fill container */
align-items: flex-start;   /* Top (in row) */
align-items: flex-end;     /* Bottom (in row) */
align-items: center;       /* Center */
align-items: baseline;     /* Align text baselines */

Align Items Examples:

center:

Small

Medium

Small

flex-start:

1

2

3

🎯 Perfect Centering

Combine justify-content and align-items to center elements perfectly.

/* Perfect centering with Flexbox */
.center-container {
    display: flex;
    justify-content: center;  /* Horizontal */
    align-items: center;      /* Vertical */
    height: 100vh;            /* Full viewport height */
}

/* Center multiple items */
.center-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;   /* Stack vertically */
    gap: 20px;
}

Perfect Center Example:

Perfectly Centered!

🔄 Flex Wrap

Controls whether flex items wrap to new lines.

/* Wrapping behavior */
flex-wrap: nowrap;    /* Default: single line */
flex-wrap: wrap;      /* Wrap to multiple lines */
flex-wrap: wrap-reverse; /* Wrap in reverse */

/* Shorthand for direction + wrap */
flex-flow: row wrap;  /* direction + wrap */

Flex Wrap Example:

Item 1

Item 2

Item 3

Item 4

Item 5

📏 Gap Property

Modern way to add spacing between flex/grid items.

/* Gap between items */
.container {
    display: flex;
    gap: 20px;           /* Equal gap */
    gap: 20px 10px;      /* row-gap column-gap */
}

/* Individual gaps */
row-gap: 20px;
column-gap: 10px;

🔲 CSS Grid Basics

Grid is a two-dimensional layout system for rows and columns.

Creating a Grid Container:

/* Basic grid */
.grid-container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
    gap: 20px;
}

/* Fractional units (fr) */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* Equal columns */
    grid-template-columns: 2fr 1fr;      /* 2:1 ratio */
}

/* Repeat notation */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    grid-template-columns: repeat(4, 200px); /* 4 x 200px columns */
}

Grid Layout Example:

1

2

3

4

5

6

📱 Responsive Grid (auto-fit & auto-fill)

Create responsive grids without media queries.

/* Responsive grid with auto-fit */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* auto-fill vs auto-fit:
   - auto-fill: Creates empty tracks
   - auto-fit: Collapses empty tracks
*/

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

🎯 Grid Alignment

Grid uses similar alignment properties to Flexbox.

/* Align entire grid */
justify-content: center;   /* Horizontal */
align-content: center;     /* Vertical */

/* Align items within cells */
justify-items: center;     /* Horizontal */
align-items: center;       /* Vertical */

/* Align individual item */
.item {
    justify-self: center;  /* Horizontal */
    align-self: center;    /* Vertical */
}

/* Shorthand for both */
place-items: center;       /* align-items + justify-items */
place-content: center;     /* align-content + justify-content */
place-self: center;        /* align-self + justify-self */

💼 Practical Real-World Examples

Example 1: Navigation Bar (Flexbox)

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: white;
}

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

Example 2: Card Grid (Grid)

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

.card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

Example 3: Hero Section (Flexbox)

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    gap: 2rem;
}

Example 4: Dashboard Layout (Grid)

.dashboard {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    gap: 1rem;
}

.sidebar {
    grid-column: 1;
    grid-row: 1 / -1;  /* Span all rows */
}

.header {
    grid-column: 2;
    grid-row: 1;
}

.main {
    grid-column: 2;
    grid-row: 2;
}

Example 5: Centered Modal (Flexbox)

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    max-width: 500px;
}

🆚 Flexbox vs Grid - When to Use What?

Use Flexbox For:

✅ One-dimensional layouts (row OR column)
✅ Navigation bars and menus
✅ Aligning items in a single direction
✅ Distributing space between items
✅ When content determines layout
✅ Simple, flexible arrangements

Use Grid For:

✅ Two-dimensional layouts (rows AND columns)
✅ Page layouts and complex structures
✅ Card grids and galleries
✅ Dashboard layouts
✅ When layout determines content placement
✅ Overlapping elements

🎨 Live Examples

Flexbox - Centered Content:

Centered with Flexbox

Grid - Card Layout:

Card 1

Card 2

Card 3

Card 4

📝 Test Your Knowledge - MCQ

💪 Practice Questions

Create a flex container that centers content both horizontally and vertically with 100vh height.
Build a navigation bar using Flexbox with logo on left and menu items on right.
Create a responsive grid layout with 3 columns that adapts to smaller screens (use auto-fit and minmax).
Make a flex row with space-between alignment and wrap behavior for mobile.
Design a dashboard layout using Grid with sidebar (250px), header, and main content area.

📌 Summary

Flexbox: One-dimensional layout (row OR column)
display: flex: Creates flex container
justify-content: Main axis alignment (horizontal in row)
align-items: Cross axis alignment (vertical in row)
Perfect center: justify-content: center + align-items: center
gap: Modern spacing between items
CSS Grid: Two-dimensional layout (rows AND columns)
display: grid: Creates grid container
grid-template-columns: Define column structure
fr unit: Fractional unit for flexible sizing
repeat(): Repeat pattern (e.g., repeat(3, 1fr))
auto-fit/auto-fill: Responsive grids without media queries
Use Flexbox: For navigation, rows of items, simple layouts
Use Grid: For card grids, page layouts, complex structures