HTML CSS - CSS Grid Layout

Creating advanced grid layouts

CSS Grid Layout is a powerful tool for creating complex and responsive web layouts. This tutorial covers advanced techniques for using CSS Grid Layout to build sophisticated designs.

Basic Grid Layout

Here is a basic example of a CSS Grid layout using grid-template-columns:

.grid-container {
    display: grid;
    gap: 10px;
}

.grid-example-1 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}
            

Advanced Grid Layout

Here is an advanced example using different column widths:

.grid-example-2 {
    grid-template-columns: 100px 1fr 2fr;
}
            

Grid Template Areas

Grid template areas allow for the creation of complex layouts. Here is an example:

.grid-example-3 {
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}
            

Responsive Grid Layout

Creating responsive grid layouts is straightforward with CSS Grid. Here is an example using media queries:

.grid-container {
    display: grid;
    gap: 10px;
}

.grid-responsive {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}
            

Grid Alignment

CSS Grid allows for precise alignment of grid items. Here is an example:

.grid-container {
    display: grid;
    gap: 10px;
    align-items: center;
    justify-items: center;
}

.grid-example-4 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}
            

Summary

In this tutorial, you learned how to create advanced grid layouts using CSS Grid. You explored basic and advanced grid layouts, grid template areas, responsive grid layouts, and grid alignment techniques. Understanding and applying these techniques will enable you to build sophisticated and responsive web designs, enhancing your skills as an advanced web developer.