HTML CSS - CSS Grid Templates

Using CSS grid templates for complex layouts

CSS Grid templates allow you to create complex layouts with ease by defining grid areas and positioning elements precisely. This tutorial covers how to use CSS Grid templates to build sophisticated and responsive web layouts.

Basic Grid Template

Here is a simple example of a CSS Grid template layout:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
            

Advanced Grid Template

Here is a more advanced example of a CSS Grid template layout:

.grid-container {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}
            

Responsive Grid Template

Here is an example of a responsive CSS Grid template layout using media queries:

.grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "header"
        "sidebar"
        "content"
        "footer";
    gap: 10px;
}

@media (min-width: 600px) {
    .grid-container {
        grid-template-columns: 200px 1fr;
        grid-template-areas: 
            "header header"
            "sidebar content"
            "footer footer";
    }
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
            

Nesting Grids

You can create even more complex layouts by nesting grids within grid items. Here is an example:

.outer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

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

.grid-item {
    background-color: #f4f4f4;
    padding: 20px;
    text-align: center;
    border: 1px solid #ddd;
}
            

Using Named Grid Lines

Named grid lines provide another way to position elements in a grid. Here is an example:

.grid-container {
    display: grid;
    grid-template-columns: [line1] 1fr [line2] 2fr [line3] 1fr [line4];
    grid-template-rows: [row1] auto [row2] 1fr [row3] auto [row4];
    gap: 10px;
}

.header {
    grid-column: line1 / line4;
    grid-row: row1 / row2;
}

.sidebar {
    grid-column: line1 / line2;
    grid-row: row2 / row3;
}

.content {
    grid-column: line2 / line4;
    grid-row: row2 / row3;
}

.footer {
    grid-column: line1 / line4;
    grid-row: row3 / row4;
}
            

Summary

In this tutorial, you learned how to use CSS Grid templates for creating complex layouts. You explored basic and advanced grid templates, responsive grid templates, nested grids, and named grid lines. Understanding and applying these techniques will enable you to create sophisticated and flexible web layouts, enhancing your skills as an advanced web developer.