css网格布局(display: grid | inline-grid)

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

介绍

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

浏览器支持状况

grid基本属性

网格容器grid container

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

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>复制代码

网格项目grid item

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

<div class="container">
  <div class="item"></div> 
  <div class="item">
      <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>复制代码

网格线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: 
    "<grid-area-name> | . | 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: <grid-row-gap> <grid-column-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;
}复制代码

本文原文档地址css-tricks.com/snippets/cs…

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

github地址为github.com/wanbo-chain…