CSS Grid Columns

    Columns define **horizontal structure**.
    
    ## Common units
    - px → fixed
    - % → relative
    - fr → flexible (recommended)
    
    ## Example
    ```css
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
    }
    ```
    
    ## UI imagination
    - 3 columns
    - Middle column is wider
    
    ## Real-world example
    - Product listing
    - Content + ads layout
    
    ## Key idea
    `fr` divides available space, not screen size.