# Tag: Layout > Posts do dpw marcados com a tag Layout. URL: https://dpw.dev/tag/layout/ ## Posts - [Layouts matemáticos com sibling-index() e sibling-count()](https://dpw.dev/css/sibling-index-sibling-count-css/): As funções sibling-index() e sibling-count() levam a contagem de elementos para o CSS: animações escalonadas, larguras e menus radiais sem JavaScript. - [CSS Gap Decorations](https://dpw.dev/css/css-gap-decorations/): Com suporte total no Chrome e no Edge, as gap decorations do CSS já permitem estilizar os espaços de grid e flexbox com bastante controle. - [A grande expansão do CSS](https://dpw.dev/css/a-grande-expansao-do-css/): CSS agora faz nativamente o que Floating UI, GSAP, Framer Motion e react-select exigiam em JavaScript. Veja quanto isso economiza e o que ainda falta. - [Item Flow: o novo sistema de layout para CSS](https://dpw.dev/css/item-flow-sistema-layout-css/): Conheça o Item Flow, proposta CSS que unifica flex-flow e grid-auto-flow em um sistema só, com masonry integrado. Notas e análise da nova sintaxe. - [Layouts com CSS Grid e minmax()](https://dpw.dev/css/layouts-com-css-grid-e-minmax/): Crie layouts responsivos inteligentes com CSS Grid e minmax(). Função poderosa para tracks flexíveis com tamanhos dinâmicos. Domine Grid agora! - [Slanted shapes (formas diagonais) com CSS](https://dpw.dev/css/slanted-shapes-formas-diagonais/): Slanted Shapes: crie formas diagonais em CSS. Técnicas criativas para backgrounds, seções e layouts com ângulos inclinados impressionantes. Domine! - [O macete para unidades de viewport em mobile](https://dpw.dev/css/o-macete-para-unidades-de-viewport-em-mobile/): Descubra o macete para unidades viewport (vh/vw) em mobile. Solução definitiva para problemas com barras de navegação em iOS e Android. Funciona! - [Você deve saber isso sobre unidades de viewport](https://dpw.dev/css/voce-deve-saber-isso-sobre-unidades-de-viewport/): Você deve saber isso sobre unidades viewport. Comportamentos inesperados, bugs mobile comuns e soluções práticas para vh, vw. Evite problemas! - [4 Layouts mais comuns com CSS Grid](https://dpw.dev/css/4-layouts-comuns-css-grid/): Aprenda 4 layouts comuns e essenciais com CSS Grid. Veja exemplos práticos de galerias, grids de artigos e designs bidimensionais responsivos. Domine Grid! - [CSS Grid intrinsecamente responsiva com minmax() e min()](https://dpw.dev/css/css-grid-intrinsecamente-responsiva-minmax-min/): CSS Grid intrinsecamente responsiva: layouts que se adaptam sozinhos. Domine minmax(), min() e técnicas para grids sem media queries. Revolucionário! - [CSS e o Contexto de Formatação de Bloco (Block Formatting Context)](https://dpw.dev/css/css-contexto-de-formatacao-de-bloco-block-formatting-context/): Entenda Block Formatting Context (BFC) em CSS profundamente: como controlar floats, margin collapsing e criar layouts mais previsíveis e eficientes. Domine! - [hack flex-grow 9999: o hack de Flexbox que você precisa conhecer](https://dpw.dev/css/flexbox-hack-flex-grow-9999/): Hack Flexbox com flex-grow: 9999 para layouts super inteligentes. Técnica avançada para quebra de linha automática sem media queries. Truque incrível! - [CSS Grid: o jeito certo](https://dpw.dev/css/css-grid-o-jeito-certo/): Aprenda CSS Grid do jeito certo desde o início absoluto. Fundamentos sólidos, conceitos essenciais e práticas corretas para dominar layouts modernos. Comece! - [Como criar templates com CSS Grid](https://dpw.dev/css/css-grid-como-criar-templates/): Crie templates poderosos com CSS Grid facilmente. Guia prático sobre grid-template-areas, linhas nomeadas e layouts profissionais semânticos. Domine Grid! - [Flexbox: como passar para a próxima linha fácil](https://dpw.dev/css/flexbox-quebrar-proxima-linha-breakline/): Aprenda como quebrar para próxima linha em Flexbox. Técnicas e truques práticos para controlar wrapping e quebras de elementos flex. Domine! - [Variáveis CSS são melhores que loops de Sass?](https://dpw.dev/css/variaveis-css-loops-sass/): Variáveis CSS são melhores que loops de Sass? Compare custom properties com preprocessadores para geração dinâmica de estilos. Veja exemplos! - [Diquinhas marotas de CSS Grid (parte 2)](https://dpw.dev/css/css-grid-dicas-parte-2/): Continue dominando CSS Grid com dicas avançadas - Parte 2. Mais técnicas profissionais, casos de uso reais e otimizações para layouts perfeitos. Domine Grid! - [O poder de flex-grow em Flexbox](https://dpw.dev/css/flex-grow-flexbox-poder/): Descubra o verdadeiro poder de flex-grow em Flexbox CSS. Entenda distribuição inteligente de espaço e controle preciso de crescimento de elementos. Domine! - [Diquinhas marotas de CSS Grid (parte 1)](https://dpw.dev/css/css-grid-dicas-parte-1/): Domine CSS Grid com dicas essenciais - Parte 1 da série. Aprenda técnicas avançadas, truques profissionais e melhores práticas para layouts modernos. Comece! - [Curso "Flexbox: o guia completo"](https://dpw.dev/css/curso-flexbox/): Curso completo de Flexbox: guia definitivo e prático. Domine o sistema de layout unidimensional mais poderoso do CSS com exemplos práticos. Aprenda tudo! - [Porque CSS Grid é melhor que Bootstrap para criar layouts](https://dpw.dev/css/css-grid-melhor-que-bootstrap/): Comparativo técnico: CSS Grid vs Bootstrap. Descubra por que Grid oferece código mais limpo, flexibilidade superior e layouts antes impossíveis. - [Curso "CSS Grid: o sistema definitivo de layouts"](https://dpw.dev/css/curso-css-grid/): Primeiro curso brasileiro de CSS Grid Layout. Aprenda o sistema definitivo de layouts web com exemplos práticos, técnicas modernas e abordagens reais. - [Você não precisa de um framework CSS Grid](https://dpw.dev/css/css-grid-frameworks-consideracoes/): CSS Grid vs Frameworks: análise completa e imparcial. Descubra quando usar Grid nativo e quando frameworks CSS ainda fazem sentido em projetos. Decida! - [Imagem de largura total em layout com limite de largura](https://dpw.dev/css/imagem-largura-total-layout-largura-limitada/): Imagem de largura total em layout com largura limitada. Técnica CSS para breakout de imagens full-width sem quebrar grid ou container. Truque incrível! - [Retrospectiva 2015](https://dpw.dev/miscelanea/retrospectiva-2015/): Retrospectiva 2015 do desenvolvimento para web. Relembre principais artigos, conquistas e momentos marcantes do ano no blog. Nostalgia pura! - [Flexbox](https://dpw.dev/css/flexbox/): Guia completo de Flexbox: sistema de layout unidimensional do CSS. Domine todas as propriedades, alinhamento e distribuição de elementos flexíveis. Aprenda! - [Unidades de CSS moderno: rem, vh, vw, vmin, vmax, ex, ch](https://dpw.dev/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/): Unidades CSS: rem, vh, vw, vmin, vmax, ex, ch explicadas. Guia completo de unidades modernas para layouts flexíveis e tipografia responsiva. Domine! - [Prevenindo "layout thrashing" com FastDom](https://dpw.dev/javascript/prevenindo-layout-thrashing-fastdom/): Aprenda a prevenir layout thrashing com FastDOM. Otimize manipulações DOM evitando reflows forçados e melhorando drasticamente a performance! - [Tipografia responsiva: melhores artigos e tutoriais](https://dpw.dev/design/tipografia-responsiva-melhores-artigos-e-tutoriais/): Tipografia responsiva: melhores artigos e tutoriais selecionados. Curadoria completa de recursos essenciais sobre tipografia fluida e adaptativa. Aprenda! - [UIkit: framework front-end modular responsivo](https://dpw.dev/css/uikit-framework-front-end-modular-responsivo/): UIkit: framework front-end modular e responsivo profissional. Alternativa leve ao Bootstrap com componentes elegantes para desenvolvimento ágil. Use! - [5 armadilhas de web design responsivo a evitar](https://dpw.dev/design/5-armadilhas-de-web-design-responsivo-a-evitar/): Evite erros comuns em design responsivo. Aprenda sobre performance, conteúdo, contexto e experiência mobile para criar sites verdadeiramente adaptáveis. - [As novas regras da web responsiva](https://dpw.dev/design/novas-regras-web-responsiva/): Descubra as novas regras da web responsiva moderna. Container queries, aspect-ratio e técnicas atuais de responsive design em CSS. Atualize-se! - [Twitter Bootstrap](https://dpw.dev/miscelanea/twitter-bootstrap/): Twitter Bootstrap: o framework front-end mais popular do mundo. Grid system flexível, componentes prontos e desenvolvimento rápido de interfaces responsivas! - [Elementos de design aplicados à Web](https://dpw.dev/design/elementos-design-aplicados-web/): Princípios fundamentais de design aplicados à web moderna. Entenda equilíbrio visual, contraste, hierarquia e elementos essenciais para interfaces eficazes! - [Wireframes para web: guia completo de desenvolvimento](https://dpw.dev/ui-ux/wireframe-web-guia-completo/): Wireframe web: guia completo para prototipação profissional. Ferramentas, técnicas e boas práticas para esboçar interfaces antes do design. Prototipe! - [10 erros básicos de web design](https://dpw.dev/design/10-erros-basicos-de-web-design/): Evite armadilhas comuns em web design hoje. Conheça os 10 erros básicos mais frequentes e aprenda a criar sites visualmente eficientes e profissionais! - [URLs longas apresentadas corretamente com CSS](https://dpw.dev/css/urls-longas-apresentadas-corretamente-com-css/): URLs longas apresentadas corretamente com CSS puro. Quebra de linha inteligente, overflow e técnicas para exibir links grandes adequadamente. Resolva! - [Ferramentas para criação de wireframes](https://dpw.dev/ui-ux/ferramentas-criacao-wireframes/): Melhores ferramentas para criação de wireframes profissionais. Compare opções gratuitas e pagas para prototipagem e design de interfaces. Escolha a ideal! - [7 ferramentas para web designs melhores](https://dpw.dev/design/7-ferramentas-para-web-designs-melhores/): Analise e melhore seus web designs com ferramentas essenciais. Descubra heat maps, testes A/B, análise de usabilidade e otimização de conversão. - [4 elementos de design para um bom call to action](https://dpw.dev/design/4-elementos-design-call-to-action/): Crie botões de chamada à ação que convertem. Domine tamanho, forma, cor e posicionamento para aumentar suas taxas de conversão drasticamente. - [User Interface em dicas rápidas](https://dpw.dev/ui-ux/user-interface-dicas-rapidas/): Dicas rápidas e práticas de User Interface (UI). Pequenas melhorias que fazem grande diferença na experiência visual e usabilidade. Aplique hoje! - [CSS float: considerações, dicas e macetes para bons layouts na web](https://dpw.dev/css/css-float-consideracoes-dicas-e-macetes-para-bons-layouts-na-web/): Guia completo sobre CSS float para layouts: o que é, para que serve, problemas comuns e técnicas de clearfix. Domine layouts tableless clássicos na web! --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml