📐 Grid Template Areas

.layout-1 {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 250px 1fr 1fr;
    gap: 20px;
}

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

.layout-2 {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main right"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
}

.layout-3 {
    display: grid;
    grid-template-areas:
        "header header header header"
        "sidebar main main right"
        "sidebar feature1 feature2 right"
        "footer footer footer footer";
    grid-template-columns: 200px 1fr 1fr 200px;
    gap: 20px;
}

.layout-4 {
    display: grid;
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
    grid-template-columns: 1fr 300px;
    gap: 20px;
}

.layout-5 {
    display: grid;
    grid-template-areas:
        "header header header"
        "stats stats stats"
        "chart1 chart2 chart3"
        "table table table";
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

/* =================================== GRID AREAS RULES =================================== */ 1. Each area name must be unique 2. Use the SAME name to span multiple cells 3. Use a period (.) for an empty cell 4. Each row must have the SAME number of columns 5. Define areas with a string for each row 6. Use grid-area property to assign elements /* =================================== EMPTY CELLS EXAMPLE =================================== */ grid-template-areas: "header header header" "sidebar . main" /* . = empty cell */ "footer footer footer"; /* =================================== RESPONSIVE GRID AREAS =================================== */ @media (max-width: 768px) { .layout { grid-template-areas: "header" "sidebar" "main" "footer"; grid-template-columns: 1fr; } }

/* Question 1: How do you define grid areas? */ /* Answer: grid-template-areas with string values */ /* Question 2: How do you make an empty cell? */ /* Answer: Use a period (.) */ /* Question 3: What property assigns an element to an area? */ /* Answer: grid-area: areaname; */ /* Question 4: What happens if rows have different numbers of columns? */ /* Answer: The layout breaks. Each row must have same number of cells. */ /* Question 5: Can grid areas be responsive? */ /* Answer: Yes! Change grid-template-areas inside media queries */