As colunas fazem um ótimo trabalho de fluxo e equilíbrio de conteúdo. Infelizmente, nem todos os elementos fluem normalmente. Às vezes, os elementos ficam presos entre as colunas.
Felizmente, você pode dizer ao navegador para manter elementos específicos juntos com break-inside.
li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )No momento, a propriedade aceita universalmente os valores autoe avoid.
Use avoidem um elemento em um layout de várias colunas para evitar que a propriedade se desagregue.
Observe a sintaxe dessa propriedade, pois há algumas variações entre os navegadores.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */A propriedade segue as propriedades de quebra de página e compartilha os mesmos valores. Por enquanto, o Firefox usa page-break-inside.
Veja o exemplo de quebra de coluna Pen (CSS-Tricks) por Katy DeCorah (@katydecorah) em CodePen.
Suporte para navegador
Propriedades de quebra de página:
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Suporte para layout de várias colunas:
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |