CSS 布局之 —— Grid 布局

CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。

注：Flexbox 和 Grid 能协同工作，而且配合得非常好（Flex 布局是一维布局系统，适合做局部布局，比如导航栏组件。Grid 是二维布局系统，通常用于整个页面的规划）。

 

通过将 CSS 规则应用于 父元素 （成为 Grid Container 网格容器）和其 子元素（成为 Grid Items 网格项），可以轻松使用 Grid（网格）布局。

 

父元素 网格容器（ Grid Container ）属性

1. 定义网格

　　要把一个元素变成一个 grid（网格），只要简单地把其 display 属性设置为 grid 即可。

　　

　　注：由于此时还没有定义希望的 grid（网格）是怎样的，其内部的 items 会简单的堆叠在一起。　　

　　

2. 定义网格的列和行

　　grid-template-row 属性： 定义网格行。


　　grid-template-column 属性： 定义网格列。

　　

 

3. 定义网格 列 / 行 间距的大小，即网格线（grid lines）的大小

　　grid-column-gap ：列间距

　　grid-row-gap：       行间距

　　grid-gap：              grid-column-gap 和 grid-row-gap 的简写语法

 

4. 定义网格列 / 行 的对齐方式

　　justify-items： 沿着 inline（行）轴线对齐网格项（grid items），适用于容器内的所有网格项。

　　align-items：   沿着 block（列）轴线对齐，适用于容器内的所有网格项。

　　place-items：   align-items 和 justify-items 的简写形式。

 

5. 定义网格区域

　　grid-template-area： 属指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。

　　　　　　　　　　　　  一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。

　　注 1：该处定义的网格区域名称由网格项（grid item）使用。

 　  注 2：通过多次重复网格区域的名称可以实现区域跨越多个网格单元格，

　　　　  通过链接区域名称创建的区域必须是矩形的，因此无法创建例如 L / T 形的区域。

 

子元素 网格项（Grid Items） 属性

6.  定义网格项（grid item） 在网格内的位置

　　grid-column-start / grid-row-start： 网格项开始的网格线

　　grid-column-end / grid-row-end：        网格项结束的网格线。

　　grid-column / grid-row：                        简写方式。

　　

 

7.  定义网格区域

　　grid-area： 用法一是引用由 grid-template-areas 属性创建的网格区域名称。

　　grid-area： 用法二是用作 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写

　　注：有使用 grid-template-areas 划分网格区域时，使用用法一；

　　　　没有使用 grid-template-areas 划分网格区域时，使用用法二。

　　

 

 

7. 定义网格项（grid item）的对齐方式

　　justify-self： 沿着 inline（行）轴线对齐网格项，此值适用于单个网格项内的内容。

　　align-self：沿着 block（列）轴线对齐，此值适用于单个网格项内的内容。

　　place-self：   align-self 和 justify-self 的简写形式。

 

 

参考：5分钟学会 CSS Grid 布局

　　　如何使用 CSS Grid 快速而又灵活的布局

　　　CSS Grid 布局完全指南(图解 Grid 详细教程)