Day 7: The Grid

Flexbox is great for lines (1D). CSS Grid is for Areas (2D). It allows you to define Columns AND Rows simultaneously.

The Container

.container {
    display: grid;
    /* Create 3 columns: 200px, auto-fill, and 1 fraction */
    grid-template-columns: 200px auto 1fr;
    gap: 10px;
}

The Unit: fr (Fraction)

fr divides the available space. grid-template-columns: 1fr 1fr 1fr; = Three equal columns. grid-template-columns: 2fr 1fr; = First column is twice as wide as the second.

Placing Items

You can explicitly tell an item where to live.

.sidebar {
    /* Start at line 1, end at line 2 */
    grid-column: 1 / 2;
}
.main {
    /* Start at line 2, span to the end (-1) */
    grid-column: 2 / -1;
}

Grid Template Areas (The Magic)

You can “draw” your layout in text!

.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

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

Flex vs Grid?

• Flexbox: Use for small components (Navbars, Lists, Card alignment).
• Grid: Use for the main page skeleton (Sidebar + Main + Header).

Homework for Day 7:

1. Create a layout using grid-template-areas.
2. Make a Header, Sidebar, Main Content, and “Ad Space”.
3. Place them into a 3-column, 3-row grid.
4. Experiment with changing the layout just by editing the CSS areas string.

Day 8: Making it fit on your phone… Responsive Design!