Map 1
LayerComp - CSS Grid Layout
  Grid Container
    display
      grid
      inline-grid
    grid-template-columns
      200px 200px 200px 200px
      1fr 1fr 1fr 1fr
      repeat(4, 1fr)
      1fr 2fr
      minmax(100px, 1fr) 1fr
      repeat(auto-fit, minmax(200px, auto))
    grid-template-rows
      100px 200px 100px 200px
      1fr 3fr 1fr 3fr
    column-gap
      24px
    row-gap
      24px
    gap
      24px
    grid-auto-flow
      row
      column
    grid-auto-columns
      100px
    grid-auto-rows
      100px
    grid
      100px / 1fr 1fr
    justify-content
      start
      end
      stretch
      space-around
      space-between
      space-evenly
      center
    align-content
      start
      end
      stretch
      space-around
      space-between
      space-evenly
      center
    justify-items
      start
      end
      center
      stretch
    align-items
      start
      end
      center
      stretch
    grid-template-areas
      "logo menu menu menu"
"sidebar conteudo conteudo conteudo"
"sidebar conteudo conteudo conteudo"
"rodape rodape rodape rodape"
    grid-template
      "logo menu menu menu" 100px
"sidebar conteudo conteudo conteudo" 400px
"sidebar conteudo conteudo conteudo"
"sidebar rodape rodape rodape" 60px / 120px 1fr
  Grid Item
    grid-area
      1 / 2 / 3 / 4
      header
    grid-column
      1
      1 / 3
      2
      4
      span 2
    grid-row
      1
      1 / 3
      2
      4
      span 2
    justify-self
      start
      end
      center
      stretch
    align-self
      start
      end
      center
      stretch
O auto se baseia no conteúdo, e não na largura da fração
Ajuda a gente a definir áreas em específico dentro da grid