grid布局

概念

网格布局：分为容器和项目，CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

容器属性

使用网格布局

display:gd/inline-grid;
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

gird可以将元素转为块元素而inline-gird可以将元素转为行内元素

<style>
        span{
            display: grid;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</body>

实现效果如下：

可以设置宽高并且不在一行显示

容器触发网格布局后，子元素会转换为块级元素，且子元素处于拉伸状态：

<style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: grid;
            margin: 50px auto;
        }
        .box span{
            padding: 0;
            margin: 0;
            border: 3px solid red;
        }
   </style>
    <div class="box">
        <span>第一个span</span>
        <span>第二个span</span>
    </div>

实现效果如下：

2.png

划分行

grid-template-rows: 具体值;

可以是多个值，每个值之间使用空格隔开，值的个数表示要划分多少行。

每个值都是具体的长度值或者是百分比的形式（百分比是父元素高度的百分比）。

例如：

grid-template-rows: 100px 200px 200px 100px;

或：

grid-template-rows: 10% 20% 30% 20% 20%;

划分列

grid-template-columns:具体指;

同理于划分行也可以用两种不同的方式表示百分比为父元素宽度的的百分比。

例如：

grid-template-columns:100px 200px 200px 100px;

或：

grid-template-columns:10% 20% 30% 20% 20%;

repeat（）

划分的行与列宽度或高度一样时可以用repeat代替上面两种方法

例如九宫格：

<style>
    .box{
        width: 300px;
        height: 300px;
        border:1px solid #000;
        margin: 50px auto;
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-template-columns: repeat(3, 100px);
    }
</style>
<div class="box"></div>

效果如下：

九宫格

百分比和像素可以混合使用

例如：

<style>
    .box{
        width: 300px;
        height: 300px;
        border:1px solid #000;
        margin: 50px auto;
        display: grid;
        grid-template-rows: repeat(3, 100px);
        grid-template-columns: 50px repeat(3, 20%) 70px;
    }
</style>
<div class="box"></div>

autofill

根据指定的单元格宽和高自动划分行和列：

<style>
    .box{
        width: 300px;
        height: 300px;
        border:1px solid #000;
        margin: 50px auto;
        display: grid;
        grid-template-rows: repeat(auto-fill, 20%);
        grid-template-columns: repeat(auto-fill, 30%);
    }
</style>
<div class="box"></div>

百分之三十用自动填充并不能把整个div的宽划分完剩下的百分之十会留白出来不再划分：

有留白

fr分数划分法

划分行和列还可以使用分数来描述：

grid-template-columns: 1fr 3fr 1fr;

代表共分3列，将容器分为5份，其中第一列占据1份，第二列占据3份，第三份占据1份。

minmax最大最小值法

设置单元格行或列的最大值和最小值：

grid-template-columns: minmax(最小值, 最大值);

当剩余距离小于最小值，且小于最大值，则使用最小值作为单元格的宽或高；
当剩余距离大于最小值，且小于最大值，则使用剩余距离作为单元格的宽或高
当剩余距离大于最大值，且大于最小值，则使用最大值作为单元格的宽或高；

auto自动填充

auto可以代替具体的值，表示自动填充，占据剩余所有的距离:

grid-template-columns:30px auto 20px;

例如：

<style>
    .box{
        width: 300px;
        height: 300px;
        border:1px solid #000;
        margin: 50px auto;
        display: grid;
        grid-template-rows:50px auto 100px;
        grid-template-columns:150px 50px auto;
    }
</style>
<div class="box"></div>