Layouts de grade de CSS para iniciantes - CSS-Tricks

Esta é uma coleção de modelos iniciais para layouts e padrões usando CSS Grid. A ideia aqui é mostrar o que a técnica é capaz de fazer e fornecer um ponto de partida que pode ser reaproveitado para outros projetos.

Lembre-se de que o suporte do navegador para Grid é bom, mas requer substitutos para navegadores legados. Isso significa que copiar e colar diretamente pode não ser adequado para alguns casos de uso.

Layout do Santo Graal

O antigo layout clássico de três colunas, onde duas barras laterais e um contêiner contendo a cópia do corpo são colocados entre um cabeçalho e rodapé de largura total.

Santo Graal Flexível

Tudo permanece intacto conforme a largura da janela de visualização muda usando um contêiner de conteúdo fluido.

Veja o Pen CSS Grid - Holy Grail 2 por Geoff Graham (@geoffgraham) no CodePen.

Santo Graal responsivo

As coisas ficam empilhadas quando a janela de visualização fica estreita.

Veja a grade CSS da caneta: Layout do Santo Graal - Responsivo por Geoff Graham (@geoffgraham) no CodePen.

2 colunas com cabeçalho e rodapé

Um layout de blog clássico em que uma coluna é para a postagem e a outra para uma barra lateral.

2 colunas flexíveis

O layout fica mole quando a janela de visualização se torna estreita, mas o layout permanece no lugar.

Veja o Pen CSS Grid: Header, Footer with 2-Column (Flexible) de Geoff Graham (@geoffgraham) no CodePen.

2 colunas responsivas

As coisas ficam empilhadas em telas menores.

Veja a Pen CSS Grid: Header, Footer with 2-Column (Responsive) por Geoff Graham (@geoffgraham) em CodePen.

Distribuído uniformemente, ajustar conforme necessário

Os elementos fluem para o layout e terminam quando não há mais.

Consulte a grade CSS da caneta distribuída uniformemente, como muitos conforme necessário por Geoff Graham (@geoffgraham) em CodePen.

Artigo com Breakout

Um ótimo pequeno truque de Tyler Sticka que permite que um elemento saia da grade. Rachel Andrew fornece uma explicação completa sobre como as linhas de grade nomeadas permitem que isso funcione.

Veja Pen CSS Grid: Artigo com Breakout por Geoff Graham (@geoffgraham) no CodePen.

Calendário Básico

Como você pode esperar, CSS Grid funciona bem para uma grade de calendário.

Veja Pen CSS Grid: Calendar por Geoff Graham (@geoffgraham) no CodePen.

Monopoly Board

Uma recriação simples do tabuleiro de jogo. Jen Simmons tem uma demo completa com estilos Monpoly.

Veja Pen CSS Grid: Monopoly Board de Geoff Graham (@geoffgraham) em CodePen.

Nosso parceiro de aprendizagem Frontend Masters

Precisa de treinamento de desenvolvimento de front-end?

O frontend Masters é o melhor lugar para obtê-lo. Eles têm cursos sobre todas as tecnologias front-end mais importantes, de React a CSS, de Vue a D3 e muito mais com Node.js e Full Stack.