CSS Grid

CSS Grid Layout

Grid é um sistema de layout bidimensional que controla colunas e linhas simultaneamente.

Container Grid

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 3 colunas: fixa + flexível + fixa */
  grid-template-rows: auto 1fr auto;        /* header + content + footer */
  gap: 1rem;                                /* row-gap e column-gap */

  /* Unidade fr - fração do espaço disponível */
  grid-template-columns: 1fr 2fr 1fr;       /* 25% + 50% + 25% */

  /* minmax - tamanho mínimo e máximo */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Holy Grail Layout

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

header  { grid-area: header; }
nav     { grid-area: sidebar; }
main    { grid-area: content; }
aside   { grid-area: aside; }
footer  { grid-area: footer; }

<div class="layout">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Conteúdo Principal</main>
  <aside>Barra Lateral</aside>
  <footer>Footer</footer>
</div>

Grid Explícito por Linhas

.destaque {
  grid-column: 1 / -1;     /* da linha 1 até a última */
  grid-row: 2 / 4;         /* da linha 2 até a linha 4 */
}

.item {
  grid-column: 2 / span 2; /* começa na coluna 2, ocupa 2 colunas */
  grid-row: 1 / 3;
}

Photo Gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

/* Destaque para primeira imagem */
.gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
  height: 412px;
}

<div class="gallery">
  <img src="foto1.jpg" alt="Foto 1">
  <img src="foto2.jpg" alt="Foto 2">
  <img src="foto3.jpg" alt="Foto 3">
  <img src="foto4.jpg" alt="Foto 4">
  <img src="foto5.jpg" alt="Foto 5">
</div>

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 250px repeat(3, 1fr);
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "sidebar header header header"
    "sidebar main   main   main";
  height: 100vh;
}

.sidebar {
  grid-area: sidebar;
  background: #2c3e50;
  color: white;
  padding: 1rem;
}

.header-dash {
  grid-area: header;
  background: #ecf0f1;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-dash {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.card-dash {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Grid Responsivo

/* Sem media queries - auto-fit + minmax */
.grid-responsivo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* auto-fill vs auto-fit */
.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* auto-fill: cria tracks vazias mesmo sem conteúdo */
}

.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* auto-fit: colapsa tracks vazias */
}

Lab: Dashboard Responsivo

Crie um dashboard com sidebar, header fixo e grid de cards. Use grid-template-areas e auto-fit com minmax.

# Testar responsividade
# Redimensione a janela para ver o grid se adaptar

# Verificar grid lines no DevTools
# Inspecione > Layout > Grid (check "Show line names")

Grid é para layout bidimensional; Flexbox para unidimensional. Use Grid para o macro layout e Flexbox para componentes internos.