弹性布局 display:grid

​​​​弹性布局 display:grid_第1张图片
每次写到这种两边对齐,中间间隔特别多的样式,都要花费一点时间。

今天尝试了一个新的样式:display:grid

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .page{
            display:grid;
            grid-template-columns: repeat(3,32%); //一行有三列 每列占比百分之32
            grid-column-gap: 2%; //中间的间隙是百分之2
             grid-row-gap: 15px; 

        }
        .page div{
            background: red;
        }
    </style>
</head>
<body>
    <div class="page">
        <div>1</div>
        <div>2</div>    
        <div>3</div>  
        <div>4</div>
        <div>5</div>    
        <div>6</div>  
        <div>7</div>
        <div>8</div>    
        <div>9</div>     
    </div>
</body>
</html>

弹性布局 display:grid_第2张图片

你可能感兴趣的:(Html)