CSS Layout cookbook

O livro de receitas (Cookbook) de layout CSS visa reunir receitas para padrões de layout comuns, coisas que você pode precisar implementar em seus próprios sites. Além de fornecer código que você pode usar como ponto de partida em seus projetos, essas receitas destacam as diferentes maneiras pelas quais as especificações de layout podem ser usadas e as escolhas que você pode fazer como desenvolvedor.

Note: Se você é novo no layout CSS, então primeiro você pode dar uma olhada em nosso módulo de aprendizado de layout CSS, pois isso lhe dará o básico de que você precisa para usar as receitas aqui.

As Receitas

Recipe Description Layout Methods
Media objects Uma caixa de duas colunas com uma imagem de um lado e um texto descritivo do outro, por ex. um post no facebook ou um tweet. CSS Grid, float fallback, fit-content sizing
Columns Quando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas. CSS Grid, Multicol, Flexbox
Center an element Como centralizar um item horizontalmente e verticalmente. Flexbox, Box Alignment
Sticky footers Criando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor. CSS Grid, Flexbox
Split navigation Um padrão de navegação em que alguns links são visualmente separados dos outros. Flexboxmargin
Breadcrumb navigation Criando uma lista de links para permitir que o visitante navegue de volta pela hierarquia da página. Flexbox
List group with badges Uma lista de itens com um acessório para exibir uma contagem. Flexbox, Box Alignment
Pagination Links para páginas de conteúdo (como resultados de pesquisa). Flexbox, Box Alignment
Card Um componente de notas/cartão, exibido em uma grade de notas/cartão. Grid Layout
Grid wrapper Para alinhar o conteúdo da grade em um wrapper central, ao mesmo tempo em que permite que os itens sejam quebrados. CSS Grid

Contribuir com uma receita

Como com todo o MDN, gostaríamos que você contribuísse com uma receita no mesmo formato que os mostrados acima. Veja esta página para um modelo e diretrizes para escrever seu próprio exemplo.