简介
栅格布局能将网页分成简单属性的行和列;
Grid(网格) 模块为 display 属性提供了一个新的值:grid。当你将任何元素的 display 属性设置为 grid 时,那么这个元素就是一个 网格容器(grid container),它的所有直接子元素就成了 网格项(grid items)。
举个栗子:
制作一个九宫格的布局展示:
第一步:HTML
<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的使用
.box 是网格栏,.box>div是网格项
.box
{
display: grid;
grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
}
grid-template-rows 定义网格中行数和行的高度;
grid-template-columns 定义网格中的列数和列的高度。
fr 单位(等分)
fr 是为网格布局定义的一个新单位。它可以帮助我们摆脱计算百分比,并将可用空间等分。
如果在网格容器中设置这个规则:grid-template-rows: 2fr 3fr,那么你的网格容器将首先被分成 2 行。然后将数字部分加在一起,这里总和为 5, 即 5 等分。
也就是说,我们将有 2 行:第一排占据垂直空间的 2/5 。 第二排占垂直空间的 3/5 。
所以,我们可以用 fr 单位代替 px
.box
{
display: grid;
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 属性是 grid-template-rows 和 grid-template-columns 的简写语法。
//刚刚的九宫格,只需要2行代码就可以实现
.box
{
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
如下展示全部的CSS:
.box{
display: grid;
background-color: #f1f1f1;
grid-template: repeat(3,1fr) / repeat(3,1fr);
width: 300px;
height: 300px;
margin: auto;
}
.box>div{
text-align: center;
background-color: #444;
line-height: 100px;
font-size: 25px;
}
.box>div:nth-of-type(odd){
background-color: aliceblue;
}
如果我们想要改变元素的位置,在不更改HTML的前提下,通过 grid 的属性来实现:
如下图:
.box>div:nth-child(6){
grid-row: 1/2; //水平网格线
grid-column: 2/3; //列网格线的开始和结束
background-color: red;
}
或者这样的简写方式也可以: grid-area: 1 / 2 / 2 / 3;
如果我们想要第六个网格跨越两个网格的宽度,如下图,我们可以这样写:
.box>div:nth-child(6){
grid-area: 1/2/2/4;
background-color: red;
}
接下来实现一个网格区域的HTML布局展示,如下:
网格区域命名
grid-area 属性也可以用来命名网格的某一个部分,然后我们可以用 grid-template-areas 属性来定位。
创建一个简单的Html:
<div class="container">
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</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";
//z注意:header 和 footer 单词重复三次。 这表明,header 和 footer 横跨 3 列的宽度
grid-gap: .75em;
background-color: #eee;
width: 100vw;
height: 100vh;
}
header{
grid-area: header;
background-color: #9b59b6;
}
nav{
grid-area: nav;
background-color: #3498db;
}
main{
grid-area: main;
background-color: #2ecc71;
}
aside{
grid-area: aside;
background-color: #f1c40f;
}
footer{
grid-area: footer;
background-color: #1abc9c;
}