css中网格布局是栅格布局吗,css网格布局(display: grid | inline-grid)

css网格布局是css中最强大的布局系统。它是一个二维系统，这意味着它可以处理列和行，不像flexbox主要是一维系统。通过css规则应用于父元素(成为网格容器)和该元素的子元素(网格项)，您可以使用网格布局。

介绍

css网格布局(又名“网格”)是一种基于网络的二维布局系统，旨在完全改变我们设计基于网格的用户界面的方式。css一直被用来布局我们的网页，但它从未做过很好的工作。比如使用表格table，浮动float，定位position等，都很容易出现一些遗漏的功能和问题。譬如垂直居中。flexbox虽然对这样情况有所帮助，但它只是适用于更简单但一维布局，而不是复杂的二维布局(flexbox和grid实际上可以很好的协同工作，简化我们的css代码)。grid是第一个专门解决布局问题的css模块，只要我们一直在制作网站，我们就一直在讨论这些问题。

浏览器支持情况

grid基本属性

网格容器grid container

它是所有网格项的直接父级。在下面例子中container是网格容器。

网格项目grid item

网格容器的子节点，即为直接后代。下面例子中item元素是网格项，但sub-item不是。

网格线grid line

构成网格结构的分界线。它们可以是垂直(‘列网格线’)或水平(‘行网络线’)，位于和行和列的任一侧

网络轨道grid track

可以理解为行和列所布局的方向，默认从左到右，从上到下

网格单元grid cell

相邻行和相邻列网格线之间到空间。即为单个网格到‘单元’

网格区域grid area

多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。

网格属性目录

父级的属性grid - 生成块级网格

inline-grid - 生成内联级网格

.container {

display: grid | inline-grid;

}复制代码

grid-template-columns | grid-template-rows

使用以空格分隔的值列表定义网格的列和行。值表示轨道的大小，之间的空间表示网格线。例如(下图为效果图，线条实际不存在)：

.container {

grid-template-columns: 40px 50px auto 50px 40px;

grid-template-rows: 25% 100px auto;

}复制代码

如果您的定义包含重复部分，则可以使用该repeat()表示法来简化事物：

.container {

grid-template-columns: repeat(3, 20px [col-start]);

}复制代码

相当于

.container {

grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];

}复制代码

网格模板区(grid-area)grid-area-name - 使用指定的网格区域的名称grid-area

。- 句点表示网格单元格

none - 没有定义网格区域

.container {

grid-template-areas:

" | . | none | ..."

"...";

}复制代码

.item-a {

grid-area: header;

}

.item-b {

grid-area: main;

}

.item-c {

grid-area: sidebar;

}

.item-d {

grid-area: footer;

}

.container {

display: grid;

grid-template-columns: 50px 50px 50px 50px;

grid-template-rows: auto;

grid-template-areas:

"header header header header"

"main main . sidebar"

"footer footer footer footer";

}复制代码

以上css将创建一个四列宽三行高的网格。整个顶行将由标题区域组成。中间行将包括两个主要区域，一个空单元格和一个侧边栏区域。最后一行是所有页脚。表现效果大概如下图：

网格间隙(行间隙grid-column-gap,列间隙grid-row-gap)

简写方式为

.container {

grid-gap: ;

}复制代码

例如：

.container {

grid-template-columns: 100px 50px 100px;

grid-template-rows: 80px auto 80px;

grid-column-gap: 10px;

grid-row-gap: 15px;

}复制代码

单元格对齐方式align-items(垂直对齐方式); justify-items(水平对齐方式)start

- 将要与其单元格的起始边缘齐平的项目对齐

end

- 将项目与其单元格的结束边缘齐平

center

- 对齐其单元格中心的项目

stretch

- 填充单元格的整个宽度(这是默认值)

.container {

justify-items: start | end | center | stretch;

}复制代码

.container {

align-items: start | end | center | stretch;

}复制代码

根据以上文档基本可以自定义一个布局组件。如本人用polymer定义了一个组件grid-layout。