CSS Grid Areas

    Grid areas allow you to **name layout sections**.
    
    This makes layout code:
    - readable
    - visual
    - easy to change
    
    ## Example
    ```css
    .container {
      display: grid;
      grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
    }
    
    .header { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .content { grid-area: content; }
    .footer { grid-area: footer; }
    ```
    
    ## UI imagination
    Header on top  
    Sidebar left  
    Content right  
    Footer bottom  
    
    ## Real-world use
    - Admin dashboards
    - Blog layouts
    - Company websites
    
    ## Why developers love this
    Layout reads like a diagram.