Advanced CSS Grid - Complex Grid Layouts

What is Advanced CSS Grid?

Advanced Grid techniques go beyond basic grid layouts to create complex, responsive designs with named areas, auto-placement, and advanced sizing.

Advanced Grid Techniques

1. Named Grid Lines

.grid {
    display: grid;
    grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
    grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}

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

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

2. Grid Template Areas (Advanced)

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.widgets { grid-area: widgets; }
.footer { grid-area: footer; }

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

3. Auto-Fit and Auto-Fill

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

/* Auto-fill: Keeps empty tracks */
.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

4. Dense Packing

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 100px;
    grid-auto-flow: dense; /* Fill gaps */
    gap: 10px;
}

.item-large {
    grid-row: span 2;
    grid-column: span 2;
}

5. Subgrid

.parent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.child-grid {
    display: grid;
    grid-template-columns: subgrid; /* Inherit parent columns */
    grid-column: span 3;
}

6. Implicit Grid

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(100px, auto); /* Auto-generated rows */
    grid-auto-flow: row; /* or column, dense */
}

Complex Layout Patterns

Pattern 1: Magazine Layout

.magazine {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 150px;
    gap: 15px;
}

.featured {
    grid-column: span 4;
    grid-row: span 3;
}

.article-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.article-2 {
    grid-column: span 2;
    grid-row: span 1;
}

Pattern 2: Dashboard Grid

.dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    height: 100vh;
}

.header {
    grid-column: 1 / -1;
}

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

.main {
    grid-column: 3 / 10;
    grid-row: 2;
}

.widgets {
    grid-column: 10 / -1;
    grid-row: 2;
}

.footer {
    grid-column: 1 / -1;
}

Pattern 3: Responsive Card Grid

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

.card-featured {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 768px) {
    .card-featured {
        grid-column: span 1;
        grid-row: span 1;
    }
}

Advanced CSS Grid - Complex Grid Layouts

On this page