CSS Grid布局实践

原文阅读地址

本文转载自 http://blog.jirengu.com/?p=990

一 Grid布局是什么？

CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。 你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。

二 重要术语

Grid Container

Grid Container 是布局容器，设置了 display: gird ，这是所有 grid item 的直接父项。 在下面的例子中，.container 就是是 grid container。

    <div class="container">
      <div class="item item-1">item1</div>
      <div class="item item-2">item2</div>
      <div class="item item-3">item3</div>
    </div>

Grid Item

Grid 容器的孩子（直接子元素）下面的 .item 元素就是 grid item，但 .sub-item不是。

    <div class="container">
      <div class="item item-1">item1</div>
      <div class="item item-2">item2</div>
         <p class="sub-item">sub-item</p>
      <div class="item item-3">item3</div>
    </div>

Grid Line

这个分界线组成网格结构。它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。 下面例中的黄线就是一个列网格线。

Grid Track

两个相邻网格线之间的空间。 你可以把它们想象成网格的列或行。 下面是第二行和第三行网格线之间的网格轨道。

Grid Cell

两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。 下面是行网格线1和2之间以及列网格线2和3的网格单元。

Grid Area

四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。 下面是行网格线1和3以及列网格线1和3之间的网格区域。

Grid 属性列表

Grid Container 的全部属性

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid
  Grid Items 的全部属性
• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

详细属性介绍及效果展示请查看原文链接