Detailed CSS implementation method for automatically populating the next column after each column of four rows is loaded

The effect of using CSS to automatically populate the next column with four rows per column, after loading a column. The topic is shown in figures as follows:

If you change the title to "only use CSS to implement four columns per row, the data will be automatically populated to the next line after loading a row", then this problem is much simpler, I believe that we can use a variety of methods to achieve. But now how to solve this problem.

On this topic, it seems not so good to solve, after all, like this kind of problem we are using JS or template-assisted implementation.

Where is the difficulty of this topic?

This effect is only implemented with CSS for dynamically added data, which means that it is not possible to change the existing document structure in addition to adding data dynamically. What do you mean? For this implementation, for example, we can use the UL>LI structure, but in addition to adding Li (the equivalent of adding a data layer), it is not possible to add a UL or other HTML tag to the original document.

The question becomes how does the Li under the same UL set their different properties so that they "float" to the other column after the fifth one? (Note: Here is the structure used by the author, you can use other structures to do)

The problem analysis here, my first reaction is to use nth-child this attribute, to Li:nth-child (5), Li:nth-child (6), Li:nth-child (7) ... Set the positioning property separately so that you can display it to the corresponding position when you add the fifth, sixth, seventh data. However, this is not appropriate for dynamically added data, after all, we do not know how many data, but also to locate the current Li need to calculate the left, top value. (We are interested in using SCSS, etc. to expand this idea)

Workaround:

Here I would like to introduce another implementation method, using the CSS3 column to separate the relevant properties (this method is supported in Ie11, other browsers need to add the corresponding browser prefix);

First, post my relevant code:

1) HTML Structure code:

<! DOCTYPE html>   

2) JS code (note: JS here is only used to generate data )

<script type= "Text/javascript" >       window.onload = function () {           var Oul = document.getElementsByTagName ( ' ul ') [0];           for (var i=0; i<9; i++) {               var _li = document.createelement (' li ');               _li.innertext = i+1;               Oul.appendchild (_li);           }       };   </script>

3) CSS Code (key section)

<style type= "Text/css" >   ul{       margin:0px;       padding:0px;       height:200px;       width:100px;       Text-align:center;       -moz-column-gap:12px;       -moz-column-count:1;       -moz-column-rule:1px solid #d8d8d8;       -webkit-column-gap:12px;       -webkit-column-count:1;       -webkit-column-rule:1px solid #d8d8d8;       column-gap:12px;       column-count:1;       column-rule:1px solid #d8d8d8;    }   UL li{       height:50px;       line-height:50px;    }   </style>

The above code is the most important part of the implementation of the CSS code, which is to achieve the requirements of the topic, the main property is the height of the UL, width, column related and Li's Height property.

Column-count represents the number of columns, COLUMN-GAP represents the gap between the breaks, and Column-rule represents the dividing line between rows;

Here the UL is set to 200px high, each Li 50px high, so that is when the column is 4 full, divided into the second column.

Show Results: