栅格布局一般怎么用_栅格是什么「建议收藏」

一、开启栅格布局（display）——父容器

栅格布局能将网页分成简单属性的行和列；Grid(网格) 模块为 display 属性提供了一个新的值：grid。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。比如下面的例子中.box是网格容器，.box>div是网格项

 <div class="box">
    <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>

二、配置行和列（grid-template-rows/grid-template-columns）——父容器

.box{ 
   
    display: grid;
    /* 属性值的个数就是行/列数，具体数值即为对应行高/列宽 */
    grid-template-rows: 200px 200px 200px;   
    grid-template-columns: 200px 200px 200px;
}

这里需要介绍一个单位：fr，它是为网格布局定义的一个新单位。它可以帮助我们摆脱计算百分比，并将可用空间按比例分配。简化之前的代码（当然，这会需要确定容器的宽高，因为等分肯定要按照父元素的宽高去计算）

.box{ 
   
    display: grid;
    width:600px;
    height:600px;
    /* 属性值的个数就是行/列数，具体数值即为对应行高/列宽所占的份数 */
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

当然，如果等分的话，写法还可以更简，官方提供了repeat()函数

.box{ 
   
    display: grid;
    /* 第一个参数是迭代次数，第二个参数是要重复的值。 */
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
}

三、配置行和列（grid-template）——父容器

该属性是grid-template-rows和grid-template-columns两条属性的简写

 .box{ 
   
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

四、控制网格项的位置与大小（grid-row/grid-column）——子元素

在不更改HTML的前提下改变元素的位置

 .box>div:nth-child(3){ 
   
     /* 开始/结束 */
     grid-row: 1/2;  
     grid-column: 2/4;  
 }

这样，第三个网格就会位于第一行第二三列

五、网格区域命名（grid-template-areas——父容器&&grid-area——子元素）

grid-area 属性也可以用来命名网格的某一个部分，然后我们可以用 grid-template-areas 属性来定位。

<div class="container">
    <div class="header"></div>
    <div class="nav"></div>
    <div class="main"></div>
    <div class="aside"></div>
    <div class="footer"></div>
</div>

需要使用 grid-area 属性来命名每个区域，然后使用 grid-template-areas 属性来指定每个网格区域所占据的行和列，现在来实现一个圣杯布局

 .container{ 
   
    display: grid;
    grid-template-rows: 1fr 5fr 1fr;
    grid-template-columns: 2fr 5fr 3fr;
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer"; 
    grid-gap: .75em;
    background-color: #eee;
    width: 100vw;
    height: 100vh;
}
.header{ 
   
    grid-area: header;
    background-color: #FF6EC7;
}
.nav{ 
   
    grid-area: nav;
    background-color: #527f76;
}
.main{ 
   
    grid-area: main;
    background-color: #99CC32;
}
.aside{ 
   
    grid-area: aside;
    background-color: #FF7F00;
}
.footer{ 
   
    grid-area: footer;
    background-color: #007FFF;
}

今天的文章栅格布局一般怎么用_栅格是什么「建议收藏」分享到此就结束了，感谢您的阅读。