COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Grid Area

CSS Grid allows you to give names to different areas of a Grid layout and then place Grid items into those named areas.

The grid-template-areas property is used to define named Grid areas, while the grid-area property assigns an element to one of those areas.

What is Grid Area?

A Grid area is a named section of a CSS Grid layout.

Instead of working only with row and column numbers, you can give meaningful names such as header, sidebar, main, and footer.

Basic Syntax

.container {
    display: grid;

    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

The grid-template-areas property creates named areas.

The grid-area property assigns each element to its corresponding named area.

Grid Area Diagram

Header

Main Content

Right

Named areas make a Grid layout easier to understand and maintain.

grid-template-areas

The grid-template-areas property defines the visual structure of the Grid using text values.

.container {
    display: grid;

    grid-template-areas:
        "header header header"
        "sidebar main right"
        "footer footer footer";
}

Each string represents one Grid row.

Each name represents a Grid area.

The same name can be repeated to make an area span multiple Grid cells.

Assigning an Element to an Area

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

The value of grid-area must match the name defined inside grid-template-areas.

Practical Website Layout

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 70px 120px 70px;
    gap: 15px;

    grid-template-areas:
        "header header header"
        "sidebar main right"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.right {
    grid-area: right;
}

.footer {
    grid-area: footer;
}

This layout creates:

Header across the complete top row
Sidebar on the left
Main content in the center
Right section on the right
Footer across the complete bottom row

Output

Header

Main Content

Right Section

Creating Empty Grid Areas

A period . can be used to create an empty Grid cell.

.container {
    display: grid;

    grid-template-areas:
        "header header"
        "sidebar ."
        "footer footer";
}

The period represents an empty Grid area.

In this example, the second cell in the second row remains empty.

Repeating a Grid Area

.container {
    grid-template-areas:
        "header header"
        "main main"
        "footer footer";
}

The header, main, and footer areas each span across two columns.

Advantages of Grid Areas

Easy to Read

Named areas make the layout structure easy to understand.

Easy to Maintain

Layout changes can be made by editing the named area structure.

Useful for Layouts

It is useful for headers, sidebars, content areas, and footers.

Real-World Uses

Website layouts
Admin dashboards
Blog layouts
E-commerce pages
Course websites
Application dashboards

Important: Every named area used in grid-template-areas should form a rectangular area. Avoid creating irregular shapes with the same area name.

Summary

CSS Grid Areas allow you to create readable and structured layouts using names such as header, sidebar, main, and footer. The grid-template-areas property defines the layout structure, while grid-area assigns elements to the named areas.

← Previous: Grid Row

Next: Grid Alignment →