32.网格布局

网格布局

网格布局，是css3新出的一种布局方式，常见的适用案例为 九宫格布局

声明网格布局环境

1. display:grid;(最常用)
2. display:inline-grid;

设置列

grid-template-columns

1. 值是 fr，1fr代表一个比例划分

   有几列就可以设置几个 fr，每一个fr所占据的 宽度比例为1fr，如果需要设置其他比例的宽度，则可以设置整倍fr

   如下例：

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

   设置了当前网格为3列，第一列的宽度为1fr，第二列的宽度是第一列的2倍，第三列宽度是第一列的3倍

   有几个fr值，就有几列

2. 还可以直接设置 具体宽度

   grid-template-column：100px 100px 200px;

3. 还可以设置 宽度+auto auto 是除了具体宽度列数之外的 自适应宽度

4. 也可以 宽度+fr 组合

设置行

grid-template-rows

他的值是行高，有几个值，就设置了几个行高

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

以上案例的含义是，设置了三行，第一行行高是100px，第二行行高是200px，第三行行高是300px

如果总行高小于父级grid的高度，则父级剩余的高度会被剩余的子元素平分

行列合写

grid-template：行 / 列

grid-template: 100px auto auto/1fr 1fr 1fr;

设置列间距

column-gap: 具体数值;

设置行间距

row-gap: 具体数值;

合写间距

gap: row column;

指定开始行

grid-row-start:1; 从第一行开始跨行

指定结束行

grid-row-end:span 3; 到第3行结束，合并3行

指定开始列

grid-column-start:1; 从第一列开始跨列

指定结束列

grid-column-end:span 3; 到第3列结束，合并3列

 <div class="grid">
    <div >1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div class="row-span">5</div>
    <div>6</div>
    <div>7</div>
    <div >8</div>
    <div class="col-span">9</div>
 </div>

.grid{
    /* 创建网格布局 */
    display: grid;
    height: 400px;
    margin: 20px auto;
    border: 1px #f00 solid;
    /* 设置列 */
    grid-template-columns: 100px 100px 1fr 3fr;
    /* 设置行 */
    grid-template-rows: 100px 100px auto;
    width: 600px;
    /* 行列合写 */
    grid-template: auto auto auto/1fr 1fr 1fr;
    /* 列间距 */
    column-gap: 20px;
    /* 行间距 */
    row-gap: 20px;
    /* 合写间距 */
    grid-gap: 40px 20px;

}
.grid>div{
       border: 1px #f00 solid;
    }
.row-span{
    grid-row-start: 1; 
    grid-row-end: span 3;
}
.col-span{
    grid-column-start:1;
    grid-column-end:span 3;
}