版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011240016/article/details/84309545
对于一个偶尔需要写写前端界面的我来说，今天了解到了HTML前端可以用网格布局之后，整个人都轻松起来了。在基于C#做手持设备开发和安卓应用程序里，都常用网格来进行布局。而在网页前端，我几乎都是用用Bootstrap这种框架来设定布局，对于基础的CSS控制样式还能搞定，但是涉及到布局，就一头雾水。
比如最近用到float:left这种布局，碰到元素之间崩塌的情况，就是元素位置根本不按照设想的来，看了一些书和文章，提到了这个问题。大家将CSS归结为艺术，不是科学。哈哈哈。
对于网格布局我还不是特别熟悉，下面先放一个测试案例：
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
<style type="text/css">
h1 {
text-align: center;
}
/*核心*/
.wrapper {
display: grid;
grid-template-columns: 30% 30% 30%;
}
.wrapper > div {
background: #eee;
padding: 1em;
}
.wrapper >div:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
非常简单的，将容器设置为：
/*核心*/
.wrapper {
display: grid;
grid-template-columns: 30% 30% 30%;
}
然后里面的元素就按照百分比来排列了~~非常方便。
grid-template-columns的用法详解
注意，这里面grid-template-columns推荐使用的是fr作为单位，当然用什么单位都是随意的，比如px等。
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
会自动按照数字的比例进行分割。
repeat法
.wrapper {
display: grid;
/*grid-template-columns: 1fr 2fr 1fr;*/
grid-template-columns: repeat(4, 1fr 2fr);
}
显示效果如下：
会按照1fr 2fr的占比分配空间，重复四次，自动计算空间分配。棒极了！
行列间隙设置
.wrapper {
display: grid;
/*grid-template-columns: 1fr 2fr 1fr;*/
grid-template-columns: repeat(4, 1fr 2fr);
/*列之间留白*/
grid-column-gap: 1em;
/*行与行间留白*/
grid-row-gap: 1em;
/*综合上面两个效果*/
grid-gap: 1em;
}
真的是让人省心的操作。
另外需要注意到，这里文字会按照最多的设定区域大小，其他文字较少的也一样要拉到和最多的文字区块一样大。
grid-auto-rows: 100px;
设置了固定大小，会导致如下问题：
文字会超出这个框。
比较好的设置方式是：
grid-auto-rows: minmax(100px, auto);
设置最小最大的范围即可得出让人满意的效果了。
嵌套格式
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid</title>
<style type="text/css">
.wrapper {
display: grid;
/*grid-template-columns: 1fr 2fr 1fr;*/
grid-template-columns: repeat(4, 1fr 2fr);
grid-gap: 1em;
/*grid-auto-rows: 100px;*/
grid-auto-rows: minmax(100px, auto);
}
/*设置基本显示效果*/
.wrapper > div {
background: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background: #ddd;
}
.nested {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 70px;
grid-gap: 1em;
}
.nested > div {
border: #333 1px solid;
padding: 1em;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div class="nested">
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
<div>Lorem</div>
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
重点是：
.nested {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 70px;
grid-gap: 1em;
}
显示效果：
这就是我一直寻找的效果。
更强大的属性
再讲几个：
justify-items:startcenter:endstretch
先看justify-items
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid</title>
<style type="text/css">
.wrapper {
display: grid;
/*grid-template-columns: 1fr 2fr 1fr;*/
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 1em;
/*grid-auto-rows: 100px;*/
grid-auto-rows: minmax(100px, auto);
justify-items:start;
}
/*设置基本显示效果*/
.wrapper > div {
background: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>
<div class="box box3">Box 3</div>
<div class="box box4">Box 4</div>
</div>
</body>
</html>
将Box的显示都弄成靠左排列的效果：
justify-items:start;
靠中间显示：
justify-items:center;
靠右边显示：
justify-items:end;
展开显示，占据该部分全部空间：
justify-items:stretch;
所以可以看出默认就是stretch显示的。
上面这种设定好像只是有左右效果，为了有上下效果，我们用的是align-items，下面一一展开来看。
/*align-items: start;*/
/*align-items: center;*/
/*align-items: end;*/
align-items: stretch;
上，中，下，展开。
上面这是对.wrapper容器进行设定，那么容器内的元素自我设定是如何做的呢？
答案就是两条：
- align-self: start/center/end/stretch;
- justify-self:start/center/end/stretch;
具体的参数与上面相同，只是这个是针对元素进行设置，上面是容器内的所有元素都服从分配。
现在来思考，如何实现网格布局的跨格子操作。
按照线条从1开始计数：
跨越多列：
.box2 {
grid-column: 1/3;
}
跨越多行：
.box2 {
grid-column: 1/3;
grid-row: 1/3;
}
注意看，这里还把Box1赶跑了。如果强行指定Box1，且和Box2有重叠，则可以实现overlapping的效果。
更完整的操作可以学习：https://css-tricks.com/snippets/css/complete-guide-grid/
考虑到之前CSS布局的头大，现在这种方式简洁到想哭啊，这和微软的Metro布局设计几乎一致，前端设计者的福音~~~
注：前端大佬随便拍砖。
END.
参考：