How to make ul crashed on the column correctly?

There's a list, divided into 3 columns with the following code:
ul{
 width: 100%;
 top: 63px;
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
 -webkit-column-rule: 1px solid lightgray;
 -moz-column-rule: 1px solid lightgray;
 column-rule: 1px solid lightgray;
}


The output is the following:
5c9a7d89ca20f871518409.jpeg

I have the first column with 9 elements, the second 8 and the third 8
To make was 9 9 7?
March 19th 20 at 08:44
1 answer
March 19th 20 at 08:46
With this separation on the column is best avoided. Flex take or even CSS Grid if IE11 and below support is not needed. So you will have almost complete control over the construction of these things.
Even if you set the height of marginy the first element of the first column and first other columns are different, hence the problem.
5c9a8a30bccf8915986259.png
Plus, such a complex column layout is needed only in very specific cases. For example: the layout of the website of the newspaper on the real prototype and the like, but certainly not for a list of references. - katlyn54 commented on March 19th 20 at 08:49

Find more questions by tags CSS