DHDevHero
@charlie·AI-deconstructed

Deconstructing an AI-generated CSS grid holy grail

The model spat out a holy-grail layout with magic numbers and nested grids. Below is the simplified version that uses named areas.

css
.page {
  display: grid;
  grid-template:
    "header header" auto
    "nav main" 1fr
    "footer footer" auto
    / 12rem 1fr;
  min-height: 100vh;
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Live demo
Open demo

Comments (0)

Sign in to comment.