题外话
从第一次使用csdn到现在应该也有两年多的时间了，为什么我总是感觉csdn的活跃度不是很高呢？但是我以后依然会在这里发布东西，只是可能不会经常在这里发布博客，但部分的应该会存在草稿箱里，至于为什么，你应该懂的。。。
认识Grid布局
Grid布局也叫网格布局，顾名思义，将页面划分为不同的格子，每一个数据展示区占据不同数量或大小的格子，最终完成数据的展示。grid具有以下特点：
- 属性繁多 ，不容易消化和记忆；
- 属性分类清晰 ，虽然属性比较多，但是分类非常清晰，要么整个容器属性，要么网格属性；
- 有兼容性问题，IE10以下是不兼容的；
容器属性介绍
1、display属性
作用： 规定parent容器类型。
属性的取值范围： grid 、 inline-grid
区别：
grid: parent元素 -> 块级元素
inline-grid : parent元素 -> 行内元素
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>grid 教程</title>
<style>
#parent{
border:2px solid blue;
display:grid;
}
.item{
color:#fff;
font-size:200%;
}
/*
one到nine类的div的背景颜色请自行设置；item是公共的类，已经设置完毕
*/
.one{
background:pink;
}
</style>
</head>
<body>
<span>test1</span>
<div id='parent'>
<div class='item one'>one</div>
<div class='item two'>two</div>
<div class='item three'>three</div>
<div class='item four'>four</div>
<div class='item five'>five</div>
<div class='item six'>six</div>
<div class='item seven'>seven</div>
<div class='item eight'>eight</div>
</div>
<span></span>
</body>
</html>
运行效果如下:
display:inline-grid的效果图如下：
2、grid-template-rows、grid-template-columns、grid-auto-rows、grid-auto-columns属性
作用：
2.1、grid-template-rows:：显式的规定容器的行数及行高。
2.2、grid-auto-rows：如果元素的位置超出规定的行数，多出来的行将按照此值作为多出来的行高。
#parent{
display:grid;
grid-template-rows:100px 100px 100px;
grid-template-columns: 100px 100px 100px;
}
grid-template-xxs 的效果图如下：
#parent{
display:grid;
grid-template-rows:100px 100px;
grid-template-columns: 100px 100px;
grid-auto-rows:50px;
}
grid-auto-xxs 的效果图如下：
发现问题：
对于上面的grid-template-rows来说，写三个100px也还可以，但是如果在工作中有10行呢，emmmm，好像确实存在
这种情况。
解决方案 ：
grid布局很强悍的，它考虑到了这种情况，所以特定为grid-template-rows、grid-template-columns设置了一
个repeat函数，用法：grid-template-rows:repeat(2,150px);
3、justify-content属性
不知道小伙伴们发现没有，当我们为parent容器设置完 列数 和 行数 后，无论如何设置，整个内容区域始终都是靠左边的，
这是为什么呢？
其实这个就跟我们即将要讲的属性 justify-content 有关，grid布局中，该属性的默认值为start（左边）。
取值范围：start（默认靠左）、end（靠右）、center（居中）、space-around（边上的项目距离边框的距离是相等的）、
space-between（边上的项目会靠在左边和右边，并且与中间的距离是相等的）、space-evenly（项目与项目之间
，项目与边框之间的距离都是相等的）
作用：调整可视化区域的位置。
注意：别忘了align-content属性，这个是负责垂直方向的（上中下），而且值也一样。
justify-content:center 的效果图如下：
项目属性介绍
对于项目属性，我各人觉得它是用来决定一个项目占据几个单元格，如果固定长度的项目，同时也可以规定项目在单元格中的位置。
1、grid-row-start、grid-row-end、grid-column-start、grid-column-end 属性
grid-row-start：单元格的起始位置
grid-row-end: 单元格的结束位置
grid-column-start: 单元格列的起始位置
grid-column-end: 单元格列的终点位置
代码展示：
#parent{
display:grid;
grid-template-rows:repeat(2,100px);
grid-template-columns:repeat(2,100px);
grid-auto-rows:50px;
grid-gap:10px;
justify-content: center;
}
.one{
background:green;
grid-column-start:1;
grid-column-end:3;
}
.two{
background:blue;
grid-row-start:2;
grid-row-end:4;
}
展示效果如下：
2、grid-area属性
作用：调整特定项目的位置。
使用规则：配合 grid-template-areas使用
代码如下：
#parent{
display:grid;
grid-template-rows:repeat(2,100px);
grid-template-columns:repeat(2,100px);
gird-auto-rows:50px;
justify-content:center;
grid-template-areas:
". bear1"
"bear2 bear3"
"bear4 bear5"
"bear6 bear7"
"bear8 bear9";
}
.one{
background:...;
grid-column-start:1;
grid-column-end:3;
}
.two{
background:...;
grid-row-start:2;
grid-row-end:4;
}
.three{
background:...;
grid-area:bear2;
}
展示的效果如下：
注意：
1、如果 grid-template-areas 的值与之前的显式网格不一样的话，显式网格会失效。
2、two的area名称是bear2、bear4。
总结
grid布局是非常强大的，起初记忆肯定是非常困难的，但是只要多加练习我相信攻克grid布局还是没有问题的。如果文章里有哪些写的不对的地方，欢迎指正。如果你觉得不错，请不要吝啬手里的赞。
扫一扫
1074
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
