摘要：网格是继之后又一非常重要的布局方法。目前，浏览器的最新版本已经开始支持它了。说在前面与的区别是一维的，是二维的。定义列随后，我们需要对列进行声明。通过扩展关键字，意味着从这个元素应该开始的位置扩展几列。
CSS Grid (CSS网格) 是继 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 浏览器的最新版本已经开始支持它了。
本篇文章，我们通过实现如下布局的照片墙的例子来学习CSS Grid。
效果分析说在前面：FlexBox 与 CSS Grid 的区别？
Flexbox是一维的， CSS Grid是二维的。你想想，使用Flexbox的时候你需要通过定义flex-direction: row | column来决定布局方向。而CSS Grid可以行、列布局。
首先，我们来分析一下最后的效果。我们把Bootstrap的网格系统搬到脑袋中，可以看到它是由4行4列组成的：
效果实现首先，和Flexbox一样，我们需要定义一个Grid容器，并且通过display: grid声明使用grid布局方式。
定义列随后，我们需要对列进行声明。通过grid-template-columns属性，以下方式定义了一个4列，每列200px的网格系统。
grid-template-columns: 200px 200px 200px 200px;
一种更简单的写法是：
grid-template-columns: repeat(4, 200px);
如果你并不想定义具体的数值，而是想每列的宽度按一行长度的占比来定义的话，可以使用Grid新引入的fr单位。fr是fraction(分数)的意思，也就是说你定义的就是分子，所有你定义的加起来就是分母。比如一整行是900px, 1fr 2fr就代表第一列占据1/3,第二列占据2/3。
在我们的效果图中，可以看到4列平分了一行的宽度，因此我们可以这样定义：
grid-template-columns: repeat(4, 1fr);
你还想在行列之间加一些间隔(Gutters), 使用grid-gap属性：
grid-gap: 0.5rem;
目前，我们的布局情况就是这样：
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap:0.5rem;
}
1
2
3
4
5
6
定义行
当一行占满之后会自动切换到下一行。没有特别需要的话，你不用定义它。
不过像我们这里需要定义每一行的高度。定义行的方式也与前面讲的定义列的方式相似，使用grid-template-rows进行定义:
grid-template-rows: repeat(4, 150px);
有一点比较尴尬的是，我们往往不知道每一块的内容是多少，有时候内容的高度会溢出定义的高度，不过不用担心，你可以使用minmax(min, max)使高度更灵活。
grid-template-rows: repeat(4, minmax(150px, auto));跨行列
以上，我们就定义好了我们网格系统的行列了。
在我们的效果图中，我们看到某些元素是占据了不止一行或者一列的，我们可以通过给每个元素(grid item)设置grid-column-start, grid-column-end来定义每一个元素开始和结束的地方。
灰色底色的数字呢，就代表着列。比如你想你的第一个元素横跨两列，那么这个元素从1开始，横跨两列，到3结束：
grid-column-start: 1;
grid-column-end: 3;
这样写，如果是后面的元素，计算它的开始位置实在不容易，因此你可以采用一种更现代的写法。通过span(扩展)关键字，意味着从这个元素应该开始的位置扩展几列。
grid-column-start: span 2;
跨行也是同样的写法，只是通过grid-row-start来定义。
最后，给每一个元素定义它应该占据的行列:
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, minmax(150px, auto));
grid-gap: .5rem;
}
.box-1 {
grid-column-start: span 2;
grid-row-start: span 2;
}
.box-2 {
grid-column-start: span 2;
}
.box-4 {
grid-row-start: span 3;
}
.box-5 {
grid-row-start: span 2;
}
.box-6 {
grid-column-start: span 2;
grid-row-start: span 2;
}
最最最后，给你的元素加上你最喜欢的背景图吧！！
【参考资料】：Grid by Example
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112207.html
摘要：抽象类抽象类做为其它字类的基类使用，一般不会直接被实例化。抽象类中可以包含具体实现，接口不能。抽象类在运行时是可见的，可以通过判断。接口只能描述类的公共部分，不会检查私有成员，而抽象类没有这样的限制。 一个普通的类 class Greeter { greeting: string; constructor(message: string) { this....
摘要：前端日报精选如何在非项目中使用知乎专栏编码规范最常被遗忘的性能优化浏览器缓存个人文章译统一样式语言掘金新的开发者提及最多的个视频众成翻译中文第期在中使用译统一样式语言掘金前端现状答题救不了前端新人相学长怼前端岁以 2017-06-29 前端日报 精选 如何在非 React 项目中使用 Redux - 知乎专栏Javascript编码规范 - Clearlove - SegmentFau...
摘要：前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报 精选 我是如何实现electron的在线升级热更新功能的？ « 张鑫旭-鑫空间-鑫生活【翻译】React 表单： Refs 的运用【...
摘要：黑体我受够这些难看的网页了，我怎么才能让它变得好看点你说。比如访问百度，百度就会向你展示一个百度一下你就知道的页面。黑体这是在浏览器中的显示黑体我受够这些难看的网页了，我怎么才能让它变得好看点？你说。 我答道:看来你得学点CSS了 学习这些东西只有一个原则，就是用你的脑袋想，用你的眼睛看，用的你手敲。很简单，对吧？ 这次我写了两个网页 看代码就用到了你的眼睛, 下面是index.htm...
摘要：内联元素层级在之上。不管是兄弟还是儿子，块级元素的层级都是后来者居上，但内联元素始终在块级元素之上。图中粉色边框黑色内联元素的是浮动元素，它的块级元素在所有块级元素之上，但是它的内联元素在所有内联元素之下。 css中有很多反人类直觉的东西，所以在学css的过程中最大的乐趣不在于记住多少，而在于自己动手做实验，一步步颠覆你的直觉，初学css层叠上下文，做了一些简单的小实验一步步验证自己的...
阅读 970·2021-11-22 15:24
阅读 4125·2021-09-23 11:51
阅读 2063·2021-09-08 09:36
阅读 3363·2019-08-30 15:43
阅读 1194·2019-08-30 13:01
阅读 972·2019-08-30 12:48
阅读 352·2019-08-29 12:52
阅读 3233·2019-08-29 12:41
