栅格布局
0 / 0 / 创建于 2年前
zyqgtt 的个人博客
一、开启栅格布局（display:grid）–父容器#
- 栅格布局能将网页分成简单的行和列；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);
}- 手动给元素子元素添加颜色
.box>div:nth-child(1) { background-color: blue; } .box>div:nth-child(2) { background-color: green; } .box>div:nth-child(3) { background-color: pink; } .box>div:nth-child(5) { background-color: blueviolet; } .box>div:nth-child(7) { background-color: palevioletred; } .box>div:nth-child(9) { background-color: yellowgreen; } - 以上代码可以实现的效果如图所示：
三、配置简写的行和列属性（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-area 属性进行定位；
<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 属性指定每个网格语气所占据的行和列，实现一个圣杯布局；
*{
margin:0;
padding:0;
}
.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;
}- 实现效果如图所示，无论是怎么调节网页窗口都是等比占据的：
- 或者缩小窗口 效果如下图
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号