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.
Nota: 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 (en-US) sizing |
| Columns (en-US) | Quando escolher layout de múltiplas colunas, flexbox ou grid para suas colunas. | CSS Grid, Multicol (en-US), Flexbox |
| Center an element (en-US) | Como centralizar um item horizontalmente e verticalmente. | Flexbox, Box Alignment (en-US) |
| Sticky footers (en-US) | Criando um rodapé que fica na parte inferior do contêiner ou viewport quando o conteúdo é menor. | CSS Grid, Flexbox |
| Split navigation (en-US) | Um padrão de navegação em que alguns links são visualmente separados dos outros. | Flexbox, margin |
| 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 (en-US) | Uma lista de itens com um acessório para exibir uma contagem. | Flexbox, Box Alignment (en-US) |
| Pagination (en-US) | Links para páginas de conteúdo (como resultados de pesquisa). | Flexbox, Box Alignment (en-US) |
| Card (en-US) | Um componente de notas/cartão, exibido em uma grade de notas/cartão. | Grid Layout |
| Grid wrapper (en-US) | 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.