Quando você usa colunas CSS? Inteligência de dados PlatoBlockchain. Pesquisa vertical. Ai.

Quando você usa colunas CSS?

Isso não é retórico: estou realmente interessado em encontrar ótimos casos de uso para layouts de várias colunas CSS.

A resposta parece direta. Use colunas quando quiser dividir qualquer conteúdo em colunas, certo? Aqui está geralmente o tipo de exemplo que você encontrará em artigos que mostram como os layouts de várias colunas CSS funcionam, incluindo nosso próprio Almanaque:

Pode apostar. Mas este é um caso de uso real? Talvez. Se o texto for relativamente breve, talvez seja um toque agradável. Foi assim que vendi para mim mesmo ao redesenhar meu site um alguns anos atrás. Não é assim hoje, mas é assim que parecia na época:

Quando você usa colunas CSS?

Mas um artigo inteiro de formato longo dividido em colunas? Eu adoro isso nos jornais, mas hesito em rolar para baixo em uma página da Web para ler uma coluna, apenas para rolar de volta para fazê-lo novamente.

Suponho que podemos usá-lo para colocar dois elementos lado a lado, mas o flexbox é muito mais adequado para isso. Além disso, uma limitação nos impede de selecionar as colunas para dimensioná-las individualmente. As colunas devem ter a mesma largura.

Uma coisa que as colunas têm a seu favor é que elas são o único método de layout CSS que fragmentos contente. (Ou seja, a menos que estejamos contando Regiões CSS… o que aconteceu com eles, afinal?!) Então, se você quiser dividir um parágrafo em colunas, já é possível sem wrappers adicionais.

Quando mais você pode precisar dividir um bloco contínuo de conteúdo em colunas? Lembro-me de precisar fazer isso quando tinha uma grande lista desordenada de itens. Eu gosto da maneira como as listas podem tornar o conteúdo fácil de digitalizar, mas as listas longas podem fazer com que um lado da página pareça super pesado. Digamos, por exemplo, que estávamos listando todas as tags de postagem para CSS-Tricks em grupos alfabéticos. Um layout de várias colunas funciona muito bem para isso:

Vá em frente e tente redimensionar a largura da janela de visualização. Três colunas são definidas, mas o número mudará com base na quantidade de espaço disponível. Tenho que amar toda essa bondade responsiva sem o trabalho de consulta de mídia!

Eu estava trabalhando em uma demo para o :left pseudo-classe e alcançou columns porque é uma ótima maneira de fragmentar as coisas para imprimir demos. Então, acho que há outro caso de uso. E enquanto fazia uma demonstração, percebi que um layout de várias colunas poderia ser usado para criar uma grade de itens de alvenaria, como uma galeria de imagens:

Mas o que mais? Estamos limitados a parágrafos curtos, listas longas e grades de fluxo livre?

Carimbo de hora:

Mais de Truques CSS