Posted on Oct 3 Responsividade é a capacidade de um Layout se adaptar ou "responder" as mudanças de viewport. Uma das formas mais comuns de se fazer isso era usando @media com o breakpoint mobile mais apropriado da época e construindo à partir dele.Mas existem outras formas de se usar breakpointsBreakpoints são valores de max-width ou min-width que demarcam a mudança de um tipo de layout pra outro. Esses valores geralmente vem de um consenso de época sobre quais são as larguras de dispositivos mais comuns.A exemplo, a tabela de breakpoints do Bootstrap grid na sua versão 5.   Então uso ou não uso breakpoints?Não dá pra falar breakpoint sem falar break. Não faz sentido você construir seu site ao redor de pontos de quebra se ele não quebrar. Não faz sentido você ter um breakpoint como colunas e muitos breakpoints, vou usar esse layout que peguei no Pinterest de exemplo. Como esse layout não vinha com protótipo, fiz um protótipo demonstrando como ele ficaria no viewport de tablet e web em tela cheia. Antes de simplesmente pegar 3 breakpoints na internet e criá-los, vamos analisar o layout: A marcação inicial vai ser simples, uma lista não ordenada de cards:  min-block-size: 100vh; no body diz que o tamanho mínimo do eixo-y (block) é de 100vh (viewport height). Isso diz explícitamente que o body tem que ser pelo menos da altura da tela toda, o que permite ele crescer pra além disso, se necessário.Em .layout, a função repeat() vai usar o algoritmo de auto-fit como primeiro parâmetro. Isso sinaliza o repeat que ao invés de repetir uma quantidade x de vezes, ele crie quantas colunas couberem no espaço disponível dele.O minmax(320px, 1fr) vai fazer com que cada coluna seja no mínimo de 320px de largura, mas fiquem maiores caso haja mais espaço disponível.🧐 Se ficou dúvidas, falo mais sobre esse algoritmo de layout no meu artigo sobre CSS Grid (link abaixo). O resultado do layout: Funciona! Mas temos alguns problemas. Como estamos usando grid, basta usar grid-column no card pra dizer a ele quantas colunas ele ocupa. Resultado:  Acima de 1320px o layout passa a ter 4 colunas. Isso se deve pois em 1320px cabem 3 cards de 430px (1290px) + o gap (2 * 16px), mas acima desse valor passam a caber 4 cards de 320px, logo o layout se reajusta.Pra alterar como o layout se comporta depois dessa largura, criamos um breakpoint: Alternativamente, podemos usar variáveis CSS pra não precisar reescrever todo valor da propriedade: Precisamos que quando couber apenas uma coluna, que o primeiro card tenha a altura maior, cobrindo 100vh da tela.Pensando no exemplo anterior, podemos criar uma variável --column pro grid-column do primeiro card, que será span 2 quando em um viewport maior, mas 1 / -1 quando em apenas uma coluna. 📝1 / -1 é utilizado no grid-column, significando que você quer que a coluna comece da primeira e vá até a última, independente de quantas colunas tenham.  📝 o bacana de usar variáveis CSS pra propriedades que você precisa reescrever é que você corre menos risco de a media query ter menos especificidade que o próprio seletor e não funcionar corretamente. Você pode brincar aqui com o resultado final:Pensei seriamente em fazer um artigo voltado pro público iniciante, porém responsividade não é um tema fácil. Pessoas iniciantes vão usar mais media queries, vão fazer hacks de CSS ou usar frameworks, e não tem nada de errado nisso.Algoritmos de layout mais complexos são adquiridos com prática, tempo e muita leitura. Se você sentiu dificuldade ao entender esse artigo com um ano ou menos de estudo, saiba que eu levei um pouco mais de 4 anos pra ser capaz de escrevê-lo.Tá tudo bem com suas media queries e gambiarras. O ponto do post é que você não precisa ser só bom em gambiarra, se você quiser. O CSS tem muito a oferecer se você tiver um pouco mais de persistência.Templates let you quickly answer FAQs or store snippets for re-use.Quando você usaE o --index só é definido no breakpoint de min-width: 1320px, significa que o var() vai ver se tem valor pra index, se não vai jogar pra auto-fit?Exatamente!Se você é familiarizado com Javascript, é quase como:Muito bom! Ótimo artigo, deu pra entender bem!! Não tinha noção que o var() fazia isso tbm, iradoEle é poderosíssimo! Quero muito escrever um artigo só sobre eleBoa tarde, Camilo, pode explicar porque usas a unidade de medida ch?Por exemplo, padding: 2ch, tenho usado px, rem, em, porem nao sei qual seria a melhor prática, um padrão para qualquer tipo de layout e parabéns por mais conteúdo maravilhoso.Salvando pra ler mais tarde e tenho certeza que ficou muito foda Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Cybermaxi7 - Sep 24 hambalee - Sep 24 Dharmen Shah - Sep 24 Andrew Ezeani - Sep 24 Once suspended, lixeletto will not be able to comment or publish posts until their suspension is removed. Once unsuspended, lixeletto will be able to comment and publish posts again. Once unpublished, all posts by lixeletto will become hidden and only accessible to themselves. If lixeletto is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Camilo Micheletto. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag lixeletto: lixeletto consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging lixeletto will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.