HTML CSS - CSS Grid Areas

Using grid areas for layout

CSS Grid Areas allow you to define named areas within your grid layout. This makes it easier to create complex layouts and manage your grid structure. This tutorial covers how to use CSS Grid Areas for layout.

Defining Grid Areas

To define grid areas, use the grid-template-areas property. This property allows you to create a template that specifies the layout of your grid.

Example:

.grid-container {
    display: grid;
    grid-template-areas:
        'header header header'
        'sidebar main main'
        'footer footer footer';
    gap: 10px;
    background-color: #f4f4f4;
    padding: 10px;
}
            

In this example, we define a grid with three rows and three columns. The first row is entirely occupied by the header, the second row has the sidebar and main content, and the third row is entirely occupied by the footer.

Placing Grid Items in Areas

Once you have defined your grid areas, you can place grid items within these areas using the grid-area property.

Example:

.header {
    grid-area: header;
    background-color: #3498db;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.sidebar {
    grid-area: sidebar;
    background-color: #2ecc71;
    padding: 20px;
    color: #fff;
}

.main {
    grid-area: main;
    background-color: #e74c3c;
    padding: 20px;
    color: #fff;
}

.footer {
    grid-area: footer;
    background-color: #f39c12;
    padding: 20px;
    text-align: center;
    color: #fff;
}
            

HTML structure:

<div class="swf-lsn-grid-container">
    <div class="swf-lsn-header">Header</div>
    <div class="swf-lsn-sidebar">Sidebar</div>
    <div class="swf-lsn-main">Main Content</div>
    <div class="swf-lsn-footer">Footer</div>
</div>
            

Responsive Grid Areas

You can create responsive layouts by changing the grid areas based on the screen size using media queries.

Example:

@media (max-width: 768px) {
    .grid-container {
        grid-template-areas:
            'header'
            'main'
            'sidebar'
            'footer';
    }
}
            

In this example, the layout changes to a single-column layout on smaller screens.

Nesting Grid Areas

You can nest grid containers to create more complex layouts. Each nested container can have its own grid areas.

Example:

.outer-container {
    display: grid;
    grid-template-areas: 'main';
}

.main-container {
    grid-area: main;
    display: grid;
    grid-template-areas:
        'header header'
        'sidebar content';
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}
            

HTML structure:

<div class="swf-lsn-outer-container">
    <div class="swf-lsn-main-container">
        <div class="swf-lsn-header">Header</div>
        <div class="swf-lsn-sidebar">Sidebar</div>
        <div class="swf-lsn-content">Content</div>
    </div>
</div>
            

Summary

In this tutorial, you learned how to use CSS Grid Areas for layout. You explored defining grid areas, placing grid items within these areas, creating responsive layouts, and nesting grid areas. Using CSS Grid Areas simplifies the creation of complex layouts and improves the readability and maintainability of your CSS code.