Three-column page content with blocks
I have a list of things in a three-column layout. I want to add some extra information to each item but I got into the problem that column changes between header and content of a block like in the image (issue is between first and second column).
This is my current css:
@media only screen and (min-width: 961px) {
div.three-column {
column-count: 3;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
}
How could I fix this? Each block is a div already.
4 Replies
so, you want each of the "rows" to be the same height?
No, I want "header" (just bold text) and the possible second row beneath it to not be on different columns. Like in that example, texts "Ikaros" and "1986 - 1988: 10 numeroa" should be in the same column.
Try adding
break-inside: avoid; on the column child elements.Ah, that did the trick, thanks!