CSS Tips — Responsive Columns
Aprenda essa dica super fácil e útil para trabalhar textos responsivos com responsive columns
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 do 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ã!
