CSS Real Layout Strategy

    Real websites use **combination**, not one tool.
    
    ## Common strategy
    - Grid → page structure
    - Flexbox → component alignment
    - Position → special cases
    
    ## Example thinking
    - Page layout → Grid
    - Navbar items → Flexbox
    - Badge → Absolute
    - Modal → Fixed
    
    ## Mental model
    ```mermaid
    flowchart TD
      A[Page Layout] --> B[Grid]
      B --> C[Flexbox Components]
      C --> D[Positioned Elements]
    ```
    
    ## Final advice
    Do not fight CSS.
    Choose the right tool for the job.