CSS Grid Introduction

    CSS Grid is a **two-dimensional layout system**.
    
    Flexbox is good for:
    - one row OR one column
    
    Grid is made for:
    - rows AND columns together
    - full page layouts
    
    ## Why Grid was introduced
    Before Grid:
    - layouts were hacky
    - floats and margins were abused
    - code was hard to maintain
    
    Grid solves this cleanly.
    
    ## Basic Grid setup
    ```css
    .container {
      display: grid;
      grid-template-columns: 200px 1fr;
    }
    ```
    
    ## UI imagination
    - Left column = sidebar (200px)
    - Right column = content (auto)
    
    ## Real-world use
    - Dashboard layouts
    - Admin panels
    - Website main structure
    
    ## Mental model
    Think of Grid like **table lines**, but flexible.
    
    ```mermaid
    flowchart TD
      A[Grid Container] --> B[Columns]
      A --> C[Rows]
    ```