Fala galera, Rodrigo Zan na área.

Mais um artigo para o quadro CSS Tips. A ideia é trazer todos os dias algumas dicas de CSS para aprimorar suas habilidades de design e tornar suas web pages ainda mais incríveis.

Dica do Dia: responsive columns

Hoje, vamos explorar a propriedade columns no CSS. Essa propriedade define o número de colunas a serem usadas ao desenhar o conteúdo de um elemento, bem como a largura dessas colunas.

Quando trabalhamos com texto, como por exemplo, um artigo, podemos utilizar a propriedade columns para definir um número de colunas para o texto. Por exemplo, se você quiser que o texto do artigo tenha 2 colunas fixas.

.article-content {
    columns: 2;
}

Porém, para um texto responsivo que se adapta 100% ao tamanho da tela, você pode usar o valor auto, e especificar a largura ideal para cada coluna. Dessa forma o navegador ficará responsável por calcular de forma automatica o número de colunas que deem preencher o espaço disponível.

.article-content {
    columns: auto 10rem;
}

Acima foi definido que o texto terá o número de colunas automático, e que o tamanho de cada coluna será de 10rem. Para transformar em pixels o valor de rem, imagine que 10rem é 10 vezes o tamanho da fonte raiz, que é, por padrão, definida na tag de uma página HTML. Se o tamanho da fonte raiz for 16px, 10rem seria igual a 160 pixels, 10 x 16.

Curtiu essa dica? Se gostou desse quadro, me dá um toque nos comentários.

Abração e até amanhã!