介绍
CSS网格布局(亦直接称为“网格”),这个一个二维网格基准的布局系统完全改变了我们传统创建网格布局界面方式。一直以来,我们用CSS设置我们的页面布局,但是从来都做得不够好。一开始我们用表格(tables),然后是浮动(floats),再是定位(postioning)和行内块(inline-block),但是这些方法都只是hack而已,还留下一大堆麻烦的功能性问题(比如垂直居中)。Flexbox在这其中脱颖而出,不过它只能在一维布局上有所建树,而在更加复杂的二维布局面前就显得力不从心了(Flexbox和Grid组合使用风味更佳)。网格(Grid)是第一个专门用来解决布局问题的CSS模块,我们终于不需要想尽办法hack页面布局样式了。
浏览器支持和基本知识
首先,你得定义一个包裹元素(container element),加上样式,用grid-template-columns
和grid-template-rows
设置其子元素模板的【行】 【列】样式。
将子元素(child elements)放置到包裹元素之中,对这个子元素应用grid-column
和gird-row
样式。和flexbox类似的是,网格项的顺序并不重要。你的CSS可以将子元素设置任意的顺序,你还可以用媒体查询(media queries)非常方面地重排元素。想象一下,只要通过几行CSS代码就可以在各种屏幕上重排整个页面,网格布局绝对是有史以来最棒的CSS模块。
重要术语
在深入网格布局的概念之前,你需要理解一个非常重要的术语。我们这里要介绍的术语长得都非常相像,你如果不去理解其中的含义并记住它们,很快你就会晕头转向了,不过好在这些术语不是很多,现在让我们一起看看吧。
例子:在这个例子中,
div.container
就是网格容器。网格项(Grid Item)
定义:网格容器的直接子元素。
- 例子:在这个例子中,
.item
就是网格项,但.sub-item
不是。<div class="container">
<div class="item">
<p class="sub-item"></p>
</div>
- 定义:组成网格基本结构的分隔线。分隔线可以是垂直的(列分隔线),也可以是水平的(行分隔线)。
- 例子:这里黄色的竖线就是列分隔线。
网格单元(Grid Cell)
- 定义:由两个相邻行分隔线和列分隔线交汇出的区域。是网格布局中的最小单元。
- 例子:第1,2两条行分隔线和第3,4两条列分隔线交汇出的空间。
- 定义:两个相邻网格分隔线分隔出来的中间区域。你可以把这个术语看成是网站布局中的一行或者一列。
- 例子:这里第二条行分隔线和第三条行分隔线之间的区域就是网格轨道。
网格区域(Grid Area)
- 定义:由4条分隔线交汇出的全部区域。一个网格区域可能由任意多个网格单元组成。