O problema com porcentagens em CSS

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

Saiba mais 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 de porcentagem, considere este layout HTML:

<divaula="recipienteminha-grade">
 <divaula="item de grade">
div>
 <divaula="item de grade">
div>
div>

O elemento externo é um elemento básico div elemento de contêiner com dois

div crianças. Cada criança tem um item de grade aula. Para transformar o container em um grid com duas colunas (duas caixas), vamos precisar aplicar o seguinte código CSS:

corpo {
cor de fundo: preto;
itens de alinhamento: Centro;
justificar-conteúdo: início flexível;
}
.my-grid {
mostrar: grade;
grade-modelo-colunas: 50% 50%;
margem: 3rem;
fronteira: 2pxsólidoouro;
preenchimento: 1rem;
}
.grid-item {
fronteira: 3pxsólidoouro;
preenchimento: 10rem 0;
fundo: azul;
}

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

Aqui está o resultado:

Mas há problemas com esse alinhamento. Primeiro, se você decidiu adicionar um brecha para o pai da grade, o filho pode transbordar para fora. Por exemplo, se você adicionar lacuna: 3px para o .my-grid bloco no CSS, então veja como o layout ficaria:

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ê estiver usando porcentagens e adicionando 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 esse gap (3px), que empurra a caixa para fora do container.

Observe que esse erro não ocorre 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 como 75% e a segunda como 50%, você pode definir a primeira coluna como 3fr e a segunda coluna como 1fr:

grade-modelo-colunas: 3fr 1fr

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

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:

grade-modelo-colunas: 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 sempre permanecerá em 10rem enquanto a coluna da esquerda ocupará o espaço restante (menos o intervalo).

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

Um exemplo mais realista

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

.recipiente {
largura: 100%;
mostrar: grade;
grade-modelo-colunas: 3fr 1fr;
brecha: 1.5rem;
}
.cartão {
cor de fundo: #5A5A5A;
preenchimento: 10px;
margem inferior: .5rem;
}

Aqui está o resultado:

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

Veja como você pode empilhar tudo em uma coluna quando a viewport atingir 55 em ou menos:

@meios de comunicação(largura máxima: 55em) {
.recipiente {
mostrar: flex;
direção flexível: coluna;
 }
}

E o resultado será mais ou menos assim:

Agora você não quer que cada cartão ocupe a largura de toda a viewport. 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 fixos (como 50%) para a coluna de modelo de grade, use o repita() funcionam da seguinte forma:

.sidebar-grid {
mostrar: grade;
grade-modelo-colunas: repita(ajuste automático, mínimo máximo(25rem, 1fr));
alinhar-conteúdo: começar;
brecha: 2rem;
}

Este CSS define um tamanho mínimo de 25 rem e um tamanho máximo de 1 fr. 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 de grade se reajusta automaticamente para duas caixas por linha.

Quando a tela fica menor, ela 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 Chrome DevTools para entender como esse CSS funcionae como o redimensionamento das janelas altera o layout.

A melhor parte é que você não precisa de uma consulta de contêiner ou nada sofisticado para tornar o elemento responsivo. Basta definir uma grade e usar mínimo máximo() para definir valores fracionários em vez de tamanhos fixos.

Saiba mais sobre grade CSS

Se você quer ser ótimo com CSS, precisa ter um conhecimento profundo de CSS Grids. As grades podem ser bastante poderosas quando bem usadas. Você pode obter praticamente qualquer layout que desejar 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 ao criar sites.