O problema com porcentagens em CSS

Certifique-se de que seus layouts sejam totalmente responsivos com uma unidade de medida alternativa.

Não muito tempo atrás, dependíamos totalmente do uso de porcentagens para larguras e alturas. Usar porcentagens significava que seu layout e elementos poderiam assumir altura e largura com base na janela de visualização. Mas à medida que o CSS moderno continua a evoluir, chegamos a um ponto em que pode até ser uma boa ideia evitar o uso de porcentagens.

Aprenda sobre os problemas comuns que você encontrará ao usar porcentagens. Descubra também as técnicas modernas de CSS para usar no lugar de porcentagens. Essas técnicas fornecerão o mesmo resultado que as porcentagens, sem nenhuma das desvantagens.

Um exemplo de grade muito simples

Para demonstrar um problema com unidades percentuais, considere este layout HTML:

<div class="container my-grid">
  <div class="grid-item">
  </div>
  <div class="grid-item">
  </div>
</div>

O elemento externo é um elemento contêiner div básico com dois filhos div. Cada filho tem uma classe grid-item. Para transformar o container em uma grade com duas colunas (duas caixas), precisaremos aplicar o seguinte código CSS:

body {
  background-color: black;
  align-items: center;
  justify-content: flex-start;
}
.my-grid {
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 3rem;
  border: 2px solid gold;
  padding: 1rem;
}
.grid-item {
  border: 3px solid gold;
  padding: 10rem 0;
  background: blue;
}

Portanto, cada coluna (item da grade) tem uma cor de fundo dourada. Na classe pai do contêiner, definimos grid-template-column como 50% para cada coluna. Como resultado, ambas as caixas ocupam 50% da largura total do elemento contêiner.

Aqui está o resultado:

Mas há problemas com esse alinhamento. Primeiro, se você decidir adicionar uma lacuna ao pai da grade, o filho poderá transbordar para fora. Por exemplo, se você adicionasse gap: 3px ao bloco .my-grid no CSS, o layout ficaria assim:

Como você pode ver na imagem acima, a caixa da direita saiu do contêiner. Às vezes você pode não perceber porque sua lacuna é pequena o suficiente, resultando em um estranho problema de alinhamento. Mas se você tiver uma lacuna maior, a sobreposição se tornará bastante óbvia.

Sempre que você usa porcentagens e adiciona margens ou lacunas, há uma grande chance de ocorrer esse tipo de erro. Mas por que o erro ocorre?

É porque cada coluna é 50% do pai. No exemplo acima, temos 50% mais 50% mais aquela lacuna (3px), que empurra a caixa para fora do contêiner.

Observe que esse erro não acontece apenas com 50-50. Você pode definir a primeira coluna para 75%, a segunda coluna para 25% e o erro ainda ocorrerá. É por isso que você precisa usar a solução a seguir com mais frequência.

A solução com valores fracionários

A solução é usar valores fracionários em vez de porcentagens. Portanto, em vez de definir a primeira coluna para 75% e a segunda para 50%, você pode definir a primeira coluna para 3fr e a segunda coluna para 1fr:

grid-template-columns: 3fr 1fr

Isso mantém a mesma proporção do primeiro exemplo. Mas a vantagem de usar unidades fr é que elas usam uma fração do espaço disponível. Neste caso, a primeira coluna ocupará três partes do espaço enquanto a segunda coluna ocupará uma parte, sem incluir o vão.

Outra vantagem de usar frs em vez de porcentagens – ou outras unidades absolutas, como px ou em – é que você pode combiná-los com valores fixos. Aqui está um exemplo:

grid-template-columns: 1fr 10rem;

Com o código acima, você obterá um valor fixo que nunca muda, independentemente do tamanho da tela. Isso ocorre porque a coluna da direita permanecerá sempre em 10rem enquanto a coluna da esquerda ocupará o espaço restante (menos a lacuna).

Às vezes você pode usar porcentagens. Mas você tem que usá-los de maneiras inteligentes que ainda possam se adaptar à situação. Muitas vezes, isso significa combiná-los com um valor fr.

Um exemplo mais realista

Vamos imaginar que você tem uma página que compreende a área de conteúdo principal e um aparte (para posts relacionados). A área de conteúdo principal ocupa três frações da tela, enquanto a área lateral ocupa o espaço restante menos a lacuna:

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 1.5rem;
}
.card {
  background-color: #5A5A5A;
  padding: 10px;
  margin-bottom: .5rem;
}

Aqui está o resultado:

Normalmente, você moveria a barra lateral (ou para o lado) para a parte inferior (ou superior) da página quando a tela ficasse muito estreita. Isso significa configurar consultas de mídia que empilham tudo umas sobre as outras quando a janela de visualização atinge um determinado ponto de interrupção.

Veja como você pode empilhar tudo em uma coluna quando a janela de visualização atingir 55em ou menos:

@media(max-width: 55em) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

E o resultado será mais ou menos assim:

Agora você não quer que cada cartão ocupe a largura de toda a janela de visualização. Em vez disso, os cartões devem ser exibidos lado a lado. A melhor maneira de conseguir isso é com grades CSS. Mas em vez de definir valores de largura fixa (como 50%) para a coluna do modelo de grade, use a função repeat() da seguinte forma:

.sidebar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    align-content: start;
    gap: 2rem;
}

Este CSS define um tamanho mínimo de 25rem e um tamanho máximo de 1fr. Essa abordagem é muito melhor do que definir larguras fixas porque depende do dimensionamento intrínseco. Em outras palavras, permite que o navegador descubra as coisas com base nos parâmetros disponíveis.

Agora, quando você reduz a janela do navegador para uma largura específica, a caixa da grade se reajusta automaticamente para duas caixas por linha.

Quando a tela fica menor, cai para uma caixa por linha. Assim, o navegador empilha tudo um sobre o outro. Tudo isso acontece conforme você redimensiona a janela. Você pode usar um recurso do navegador como o Chrome DevTools para entender como esse CSS funciona e como o redimensionamento das janelas altera o layout.

A melhor parte é que você não precisa de uma consulta de contêiner ou de qualquer coisa sofisticada para tornar o elemento responsivo. Basta definir uma grade e usar min-max() para definir valores fracionários em vez de tamanhos fixos.

Saiba mais sobre grade CSS

Se você quer ser ótimo com CSS, você precisa ter um conhecimento profundo de CSS Grids. As grades podem ser bastante poderosas quando bem utilizadas. Você pode obter quase qualquer layout desejado usando Grids. Isso o torna uma ferramenta indispensável em CSS.

Uma coisa a ter em mente ao usar grades CSS é focar na capacidade de resposta. Você também pode usar a abordagem fracionária para evitar casos de colisões entre elementos. Lembre-se de dominar as grades CSS porque o estilo de layout o ajudará imensamente na criação de sites.