CSS Grid Masterclass

Exploração de padrões modernos de layout utilizando Grid Areas e Auto-fill para máxima responsividade.

1. Holy Grail Layout

Header
Content
Footer
CSS: Holy Grail 
.grid-holy-grail {
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 80px 1fr 80px;
  grid-template-rows: 40px 120px 40px;
  gap: 10px;
}

2. Bento Grid Pattern

1
2
3
4
CSS: Bento Grid 
.grid-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 60px;
  gap: 15px;
}
.tall { grid-row: span 2; }
.wide { grid-column: span 2; }