css many columns

css multi-column can be more easily define multi-column text, like newspapers did.

Properties are as follows:

1, column-count a predetermined number of columns of elements should be separated

Applies: In addition to the non-replaced block-level table elements, table cells, inline-block element

　　auto: calculated according to the browser, integer: value greater than 0

2, column-gap of a predetermined size of the interval between the rows and columns

3, column-rule or set the border between the search target column to column, the composite properties

　　color-rule-color/color-rule-style/color-rule-width

4, column-fill all the columns set or retrieve objects whether the height of unity

　　SUMMARY highly adaptive auto column

　　balance the height of all columns in the highest of a unified

5, column-span set or retrieve objects across all of the elements are listed

　　none does not cross the column, all columns across all

6, column-width set or retrieve the object width of each column

7, columns, or set the number of columns to be searched and the width of each column, is a compound attribute

　　<'column-width'>||<'column-count'>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        column-count:4;
        column-GAP : 30px ; 
        column-rule : 2px Solid Green ; 
        column-span : All ; 
        Columns : 50px. 3 ; 
    } 
    </ style > 
</ head > 
< body > 
    < H2 > Test Title Test Title Test Title Test Title </ h2 > 
    < div >Test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text test text </ div > 
</ body > 
</ HTML >

Multi-column for the waterfall can make a very nice effect

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{  
            background-size:500px 500px;
            background:url(../MYPROJECT/imges/a.png),url(../MYPROJECT/imges/bg.gif);
            background-color: hsl(0, 20%, 17%);
        }
        #items{
           width: 90%;
           margin: 10px 5%;
           column-count: 5;
           column-gap: 20px;
           column-fill:auto;
        }
        img{
            display: block;
            width:100%;
        }
        #items div{
            border:2px solid pink;
            margin-bottom: 10px;
            padding:5px;
            break-inside: avoid;

        }
        p{
            font-size: 18px;
            color:#a77869;
            text-align: center;
            font-weight: bold;
            padding:10px 0;
        }
    </style>
</head>

<body>
    <div id="items">
        <div>
            <img src="../MyProject/imges/1.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/2.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/3.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/4.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/5.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/6.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/7.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/8.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/9.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
        <div>
            <img src="../MyProject/imges/10.jpg">
            <p>
                It was very cute small animals do
            </p>
        </div>
    </div>
</body>

</html>

Guess you like