CSS Grid

Master the powerful two-dimensional layout system for complex web layouts

Introduction to CSS Grid

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.

Key Grid Concepts:

Grid Container: The parent element with display: grid
Grid Items: Direct children of the grid container
Grid Lines: The dividing lines that make up the structure
Grid Tracks: The space between two adjacent grid lines
Grid Cells: The space between two adjacent row and column lines
Grid Areas: The total space surrounded by four grid lines

Creating a Grid Container

/* Basic grid setup */
.grid-container {
    display: grid;
}

/* HTML Structure */

    Item 1
    Item 2
    Item 3
    Item 4

Grid Container Properties

1. grid-template-columns & grid-template-rows

Define the columns and rows of the grid with a space-separated list of values.

/* Fixed column widths */
.grid-fixed {
    display: grid;
    grid-template-columns: 200px 300px 100px;
    grid-template-rows: 100px 200px;
}

/* Flexible columns using fr unit */
.grid-flexible {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 ratio */
    grid-template-rows: auto 1fr auto;
}

/* Mixed units */
.grid-mixed {
    display: grid;
    grid-template-columns: 200px 1fr 100px;
    grid-template-rows: 60px 1fr 40px;
}

/* Using repeat() function */
.grid-repeat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    grid-template-rows: repeat(2, 200px);   /* 2 rows of 200px */
}

/* Auto-fit and auto-fill */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

2. gap (grid-gap)

Sets the gaps between rows and columns.

/* Equal gap for rows and columns */
.grid-gap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Different gaps for rows and columns */
.grid-gap-different {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 10px;  /* row-gap column-gap */
}

/* Individual gap properties */
.grid-gap-individual {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 10px;
}

3. grid-template-areas

Define a grid template by referencing the names of grid areas.

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

/* Assign items to areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

4. justify-items & align-items

Align grid items within their grid cells.

.grid-alignment {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 150px);
    gap: 20px;
    
    /* Horizontal alignment */
    justify-items: center;  /* start, end, center, stretch */
    
    /* Vertical alignment */
    align-items: center;    /* start, end, center, stretch */
}

/* Shorthand for both */
.grid-place-items {
    display: grid;
    place-items: center;  /* align-items justify-items */
}

5. justify-content & align-content

Align the entire grid within the grid container.

.grid-content-alignment {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 150px);
    gap: 20px;
    height: 100vh;
    
    /* Horizontal alignment of grid */
    justify-content: center;  /* start, end, center, stretch, space-around, space-between, space-evenly */
    
    /* Vertical alignment of grid */
    align-content: center;    /* start, end, center, stretch, space-around, space-between, space-evenly */
}

/* Shorthand */
.grid-place-content {
    display: grid;
    place-content: center;  /* align-content justify-content */
}

Grid Item Properties

1. grid-column & grid-row

Determine a grid item's location within the grid.

/* Span specific lines */
.item-1 {
    grid-column: 1 / 3;  /* From line 1 to line 3 */
    grid-row: 1 / 2;     /* From line 1 to line 2 */
}

/* Span number of tracks */
.item-2 {
    grid-column: span 2;  /* Span 2 columns */
    grid-row: span 1;     /* Span 1 row */
}

/* Using start and end properties */
.item-3 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

/* Span to the end */
.item-4 {
    grid-column: 1 / -1;  /* From first to last line */
}

2. grid-area

Shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end.

/* Using grid-area with line numbers */
.item-area {
    grid-area: 1 / 2 / 3 / 4;  /* row-start / column-start / row-end / column-end */
}

/* Using named areas */
.header {
    grid-area: header;
}

/* Spanning with grid-area */
.spanning-item {
    grid-area: 1 / 1 / span 2 / span 3;
}

3. justify-self & align-self

Align individual grid items within their grid cells.

.item-self-align {
    justify-self: end;    /* start, end, center, stretch */
    align-self: center;   /* start, end, center, stretch */
}

/* Shorthand */
.item-place-self {
    place-self: center end;  /* align-self justify-self */
}

Advanced Grid Techniques

1. Responsive Grid with minmax()

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

/* Auto-sizing tracks */
.auto-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
}

2. Nested Grids

.outer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

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

3. Grid with Named Lines

.named-lines-grid {
    display: grid;
    grid-template-columns: 
        [sidebar-start] 250px 
        [sidebar-end main-start] 1fr 
        [main-end];
    grid-template-rows: 
        [header-start] 60px 
        [header-end content-start] 1fr 
        [content-end footer-start] 40px 
        [footer-end];
}

.header {
    grid-column: sidebar-start / main-end;
    grid-row: header-start / header-end;
}

Practical Grid Examples

1. Website Layout

.website-layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 1rem;
}

.header { 
    grid-area: header; 
    background: #333;
    color: white;
    padding: 1rem;
}

.nav { 
    grid-area: nav; 
    background: #f4f4f4;
    padding: 1rem;
}

.main { 
    grid-area: main; 
    padding: 2rem;
}

.aside { 
    grid-area: aside; 
    background: #f9f9f9;
    padding: 1rem;
}

.footer { 
    grid-area: footer; 
    background: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

2. Card Grid Layout

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

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    padding: 1.5rem;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* Featured card spans 2 columns */
.card.featured {
    grid-column: span 2;
}

3. Image Gallery

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    gap: 1rem;
    padding: 1rem;
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Large items */
.gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

Grid vs Flexbox

When to Use Grid vs Flexbox:

Use Grid for: Two-dimensional layouts, complex layouts, when you need precise control over both rows and columns
Use Flexbox for: One-dimensional layouts, component-level layouts, when you need flexible item sizing
Combine both: Use Grid for page layout and Flexbox for component layouts

Browser Support & Fallbacks

/* Fallback for older browsers */
.grid-with-fallback {
    /* Flexbox fallback */
    display: flex;
    flex-wrap: wrap;
}

.grid-with-fallback > * {
    flex: 1 1 300px;
    margin: 1rem;
}

/* Grid enhancement */
@supports (display: grid) {
    .grid-with-fallback {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }
    
    .grid-with-fallback > * {
        margin: 0;
    }
}