Layout

Para esse layout clássico, há um cabeçalho, um rodapé, uma barra lateral esquerda, uma barra lateral direita e um conteúdo principal. Ele é semelhante ao layout anterior, mas agora com barras laterais.

Para escrever essa grade inteira usando uma única linha de código, use a propriedade grid-template. Isso permite que você defina as linhas e colunas ao mesmo tempo.

O par de propriedade e valor é: grid-template: auto 1fr auto / auto 1fr auto. A barra entre a primeira e a segunda listas separadas por espaços é a quebra entre linhas e colunas.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

Como no último exemplo, onde o cabeçalho e o rodapé tinham conteúdo de tamanho automático, as barras laterais esquerda e direita são dimensionadas automaticamente com base no tamanho intrínseco dos filhos. No entanto, desta vez, o tamanho é horizontal (largura) em vez de vertical (altura).

HTML

<div class="parent">
    <header class="section coral">Header</header>
    <div class="left-side section blue">Left Sidebar</div>
    <main class="section green"> Main Content</main>
    <div class="right-side section yellow">Right Sidebar</div>
    <footer class="section coral">Footer</footer>
  </div>

CSS

        .parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

header {
  padding: 2rem;
  grid-column: 1 / 4;
}

.left-side {
  grid-column: 1 / 2;
}

main {
  grid-column: 2 / 3;
}

.right-side {
  grid-column: 3 / 4;
}

footer {
  grid-column: 1 / 4;
}