CSS Grid 布局

一、什么是Grid布局？

　　CSS Grid （网格布局），是一个基于二维网格布局的系统。网格由一组相交的水平线和垂直线组成，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

二、浏览器支持情况(统计数据来自：http://caniuse.com/)

三、Grid基本概念

　　网格容器、网格项

　　将某一个元素的display属性值设置为grid或者inline-grid，该元素就被声明成为一个网格容器(Grid Container)，它的所有子元素都会进入grid文档流，成为网格项(Grid item)

　　display : grid | inline-grid | subgrid

　　--grid：定义一个块级的网格容器

　　--inline-grid：定义一个内联的网格容器

• 　　--subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.container{
    display: grid;
}
.item{
    font-size: 20px;

    display: flex;

    box-sizing: border-box;
    height: 100px;
    padding: 20px;

    color: #fff;
    border: 1px solid #333;
    border-radius: 5px;
    background: #0091db;

    justify-content: center;
    align-items: center;
}

　　

　　网格轨道

　　通过定义网格容器的grid-template-columns和grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。

　　

　　在轨道清单中使用repeat()

　　在网格容器中定义重复的网格轨道可以使用 repeat()。例如网格定义：

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

　　也可以写成：

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

　　repeat() 也可以这么使用（container将会包括10个轨道，1个1fr的轨道后面跟着1个2fr的轨道，重复5次。）：

.container{
    display: grid;
    grid-template-columns: repeat(5, 1fr 2fr);
}

　　或者（起始轨道为10px，接着用repeat声明了8个1fr的轨道，然后再添加了一个20px的轨道）：

.container{
    display: grid;
    grid-template-columns: 10px repeat(8, 1fr) 20px;
}

　　网格线

　　当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建带编号的网格线来让我们来定位每一个网格项目。 例如下面这个五列两行的网格中，就拥有6条纵向的网格线。

　　

　　网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。 网格线也可以被命名，并且一条网格线可以具有有多个名称，参照：

.container{
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100% [third-line] auto [last-line];
}

　　隐式和显式网格

　　当我们显式定位行或列(使用 grid-template-rows/grid-template-columns属性)时,就会产生超出定义范围内的隐式网格轨道。按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。

　　比如：使用grid-column 和 grid-row 来定位网格项

<div class="container">
    <div class="item a">1</div>
    <div class="item b">2</div>
    <div class="item c">3</div>
    <div class="item d">4</div>
</div>

.container{
    display: grid;
    grid-template-columns: 50px 50px;
    grid-template-rows: 100px 100px;
    grid-row-gap:1px;
    grid-column-gap:1px;
    background: #333;
}
.item{
    font-size: 20px;

    display: flex;

    box-sizing: border-box;

    color: #fff;
    background: #0091db;

    justify-content: center;
    align-items: center;
}
.a{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.b{
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

　　

　　grid-auto-rows和grid-auto-columns属性就是用来指定隐式网格中自动生成的网格轨道的大小。

.container{
    grid-auto-columns: 50px;
}

 　　

 

　　轨道大小和minmax()

　　在设置一个显式的网格或者定义自动创建的行和列的大小的时候，我们也许想给网格一个最小的尺寸，但要确保他们能扩大到容纳他里面添加的内容。举个例子，我想让我的行的高度永远不会缩小到100像素以下，但是如果我的内容延伸到300像素高了我想让我的行高也延伸到这个高度。为了解决这个问题，就需要用到minmax()函数。例如：

.container{
    grid-auto-columns: minmax(100px, auto);
}

　　在本例中用minmax()作为grid-auto-rows的值。自动创建的行高将会是最小100px，最大为auto。用auto意味着行的尺寸将会根据内容的大小来自动变换。

　　

　　跨轨道放置网格项目

　　使用grid-column-start,grid-column-end,grid-row-start,grid-row-end属性，当放置元素时，使用网格线定位，而非网格轨道。

 

.a{
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 2; 
    grid-row-end: 3; 
}
.b{
    grid-column-start: 5; 
    grid-column-end: 6; 
    grid-row-start: 2; 
    grid-row-end: 3; 
}

　　也可以写成：

.a{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.b{
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

　　网格单元

　　一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级项目将会排列在每个事先定义好的网格单元中。

　　

　　网格区域

　　网格项目可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形，也就是说你不可能创建出一个类似于“L”形的网格区域。

　　

　　网格间距

　　在两个网格单元之间的网格横向间距或网格纵向间距可使用 grid-column-gap 和 grid-row-gap属性来创建，或者直接使用两个合并的缩写形式gard-gap 。

.container{
    display: grid;
    grid-row-gap:10px;
    grid-column-gap:10px;
    background: #333;
}