网格布局
网格布局
目前，谷歌浏览器及火狐浏览器已经对网格布局给予了充分支持。
定义网格布局
diplay: grid;
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(4, 100px);
}
.container div{
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">item 1</div>
<div class="item2">item 2</div>
<div class="item3">item 3</div>
<div class="item4">item 4</div>
<div class="item5">item 5</div>
<div class="item6">item 6</div>
<div class="item7">item 7</div>
<div class="item8">item 8</div>
<div class="item9">item 9</div>
<div class="item10">item 10</div>
<div class="item11">item 11</div>
<div class="item12">item 12</div>
</div>
</body>
</html>
container类定义了网格布局，就叫网格容器吧，其子元素就叫grid项目。
grid-template-rows
这个定义了每一行的高度，上面代码就是定义了3行，每行高度分别是200px，100px，200px;
grid-template-columns
定义了列数和宽度
grid-template-columns: repeat(列数, 宽度);
grid-template-columns: repeat(4, 100px);
等同于
grid-template-columns: 100px 100px 100px 100px;
这个显示边框，方便观察
.container div{
border: 1px solid lightgray;
}
这样基本的网格就知道构建的方法了，接下来就是编写每个网格所占据的位置。
四个重要属性
grid-row-start网格开始的水平线grid-row-end网格结束的水平线grid-column-start网格开始的垂直线grid-column-end网格结束的垂直线
用具体代码来解释
添加以下CSS代码
.item1{
grid-row-start: 1; /*表格中最上边那条水平线*/
grid-row-end: 2; /*表格中从上到下的第二条水平线*/
grid-column-start: 1; /*表格中最靠左的垂直线*/
grid-column-end: 3; /*表格中从左往右第三条水平线*/
}
确定了这些线的位置后，item1这个格子也就确定了，这四条线围成的格子就是了。
以上可以简写成以下代码
.item1{
grid-row: 1/2;
grid-column: 1/3;
}
网格布局的fr单位
在引入了网格布局后，又新增了一个单位fr(fraction的简称)，它是相对单位，1个fr可以得到空间中的1份，这具体什么1份，我就不清楚了，不过是个相对单位就行了，比px灵活。
改下CSS代码，看下效果
.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(4, 1fr);
}
grid-gap
这个是行和行，列与列之间的间隔
.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
grid-column-gap和grid-row-gap
前者是单独定义列与列的间隔，后者是单独定义行与行的间隔
命名网格线
通过命名网格线来分别定义单元格的宽度和高度。
如下代码，我是感觉挺麻烦的，可能太渣了，玩得还不够6。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
display: grid;
width: 100%;
min-height: 600px;
grid-gap: 1rem;
grid-template-columns:
[main-start] 1fr /*宽度 最左边的那条线*/
[main-end];
grid-template-rows:
[row1-start] 80px /*这后面 代表的是行的高度*/
[row2-start] 1fr
[row3-start] 100px
[row3-end];
}
header{
grid-column: main-start/ main-end;
grid-row: row1-start/row2-start;
}
main{
grid-column: main-start/ main-end;
grid-row: row2-start/row3-start;
display: grid;
grid-gap: 1rem;
grid-template-columns:
[aside-start] 200px
[aside-end];
grid-template-rows:
[aside-row-start ] 1fr
[aside-row-end ];
;
}
aside{
grid-column: aside-start/ aside-end;
grid-row: aside-row-start/aside-row-end;
}
footer{
grid-column: main-start/ main-end;
grid-row: row3-start/row3-end;
}
.border{
border: 1px solid lightgray;
}
</style>
</head>
<body>
<header class="border">网页头部</header>
<main class="border">
<aside class="border">侧边栏</aside>
</main>
<footer class="border">网站脚部</footer>
</body>
</html>
使用区域
利用属性grid-template-areas
这个看起来就比较直观
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
display: grid;
grid-template-rows: 200px 100px 200px;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header{grid-area: header;}
.sidebar{grid-area: sidebar;}
.content{grid-area: content;}
.footer{grid-area: footer;}
.container div{
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div class="container">
<div class="header">网页头部</div>
<div class="sidebar">侧边栏</div>
<div class="footer">网页脚注</div>
<div class="content">内容</div>
</div>
</body>
</html>
以上三种排列网格的方法，看自己喜欢哪个了。
提前祝大家新年快乐。
