grid布局

grid布局简单介绍

• CSS网格布局（又名“网格”）是一个二维的基于网格的布局系统，其目的只在于完全改变我们设计基于网格的用户界面的方式。 CSS一直用来布局网页，但一直都不完美。 一开始我们使用table 做布局，然后转向浮动、定位以及inline-block，但所有这些方法本质上都是 Hack 的方式，并且遗漏了很多重要的功能（例如垂直居中）。 Flexbox的出现在一定程度上解决了这个问题，但是它的目的是为了更简单的一维布局，而不是复杂的二维布局（Flexbox和Grid实际上一起工作得很好）。 只要我们一直在制作网站，我们就一直在为解决布局问题不断探索，
• 而Grid是第一个专门为解决布局问题而生的CSS模块。一开始你需要使用display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小，然后使用grid-column和 grid-row把它的子元素放入网格。 与flexbox类似，网格子元素的原始顺序不重要。 你的可以在 CSS 里以任意顺序放置它们，这使得使用媒体查询重新排列网格变得非常容易。 想象一下，我们需要定义整个页面的布局，然后为了适应不同的屏幕宽度完全重新排列，我们只需要几行CSS就能实现这个需求。 网格是有史以来最强大的CSS模块之一。

浏览器支持

浏览器兼容

基本概念

• Grid Container:设置了 display: gird 的元素。 这是所有grid item 的直接父项。
• Grid Item:是Grid 容器的孩子（直接子元素）。
• Grid Line:作为分界线组成网格结构。 它们既可以是垂直的（“column grid lines”），也可以是水平的（“row grid lines”），并位于行或列的任一侧。
• Grid Track:两个相邻网格线之间的空间。 你可以把它们想象成网格的列或行。
• Grid Cell:两个相邻的行和两个相邻的列网格线之间的空间。它是网格的一个“单元”。
• Grid Area:四个网格线包围的总空间。 网格区域可以由任意数量的网格单元组成。

Grid 属性列表

• 父亲Grid Container 的全部属性

1. display
   作用：将元素定义为 grid contaienr，并为其内容建立新的网格格式化上下文(grid formatting context)。

.container {
  display: grid | inline-grid | subgrid;
}

2. grid-template-columns
3. grid-template-rows

//使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
//(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
//也可以给网格线指定确切的命名
.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

4. grid-template-areas
   作用：通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  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";
}
//.代表单个空单元格
//声明中的每一行都需要有相同数量的单元格

上述代码创建的网格如下图

grid-template-areas

5. grid-template
   作用：在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}
//上述代码等价于
.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

6. grid-column-gap和 grid-row-gap
   作用：指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}
//举个例子
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

上述代码创立的网格如下图

网格线大小

8. grid-gap
   作用：grid-row-gap 和 grid-column-gap 的缩写

//基本语法
.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}
//举个例子
.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

9. justify-items
   作用：沿着行轴对齐网格内的内容（与之对应的是 align-items, 即沿着列轴对齐），该值适用于容器内的所有的 grid items。

//基本语法
.container {
  justify-items: start | end | center | stretch;
}
//举个例子
.container {
  justify-items: start;
}
.container{
  justify-items: end;
}
.container {
  justify-items: center;
}
.container {
  justify-items: stretch;
}

上述代码的四个例子

start
end
center
stretch

10. align-items
    作用：沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

//基本语法
.container {
  align-items: start | end | center | stretch;
}
//举个例子
.container {
  align-items: start;
}
.container {
  align-items: end;
}
.container {
  align-items: center;
}
.container {
  align-items: stretch;
}

上述代码的四个例子

start
end
center
stretch

11. justify-content
    作用：有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。

//基本语法
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
//举例子
.container {
  justify-content: start;
}
.container {
  justify-content: end; 
}
.container {
  justify-content: center;  
}
.container {
  justify-content: stretch; 
}
.container {
  justify-content: space-around;  
}
.container {
  justify-content: space-between; 
}
.container {
  justify-content: space-evenly;  
}

上述代码的七个例子

start
end
center
stretch
space-around
space-between
space-evenly

12. align-content
    作用：有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着列轴对齐网格（与之对应的是 justify-content, 即沿着行轴对齐）。

//基本语法
.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
//举例子
.container {
  align-content: start; 
}
.container {
  align-content: end; 
}
.container {
  align-content: center;  
}
.container {
  align-content: stretch; 
}
.container {
  align-content: space-around;  
}
.container {
  align-content: space-between; 
}
.container {
  align-content: space-evenly;  
}

上述代码的七个例子

start
end
center
stretch
space-around
space-between
space-evenly

13. grid-auto-columns和grid-auto-rows
    作用：指定自动生成的网格轨道（又名隐式网格轨道）的大小。 隐式网格轨道在你显式的定位超出指定网格范围的行或列（使用 grid-template-rows/grid-template-columns）时被创建。

//基础语法
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
//举例说明
//代码1
.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}
//代码2
.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
//代码3
.container {
  grid-auto-columns: 60px;
}

代码1创建的网格
代码2创建的网格
代码3创建的网格

15. grid-auto-flow
    作用：如果你存在没有显示指明放置在网格上的 grid item，则自动放置算法会自动放置这些项目。 而该属性则用于控制自动布局算法的工作方式。
16. grid
    作用：在单个属性中设置所有以下属性的简写：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow。 它同时也将 sets grid-column-gap 和 grid-row-gap 设置为它们的初始值，即使它们不能被此属性显示设置。
    它也可用使用一个更复杂但相当方便的语法来一次设置所有内容。 你可以指定 grid-template-areas、grid-template-rows 以及grid-template-columns，并将所有其他子属性设置为其初始值。 你现在所做的是在其网格区域内，指定网格线名称和内联轨道大小。

儿子Grid Items 的全部属性

1. grid-column-start grid-column-end grid-row-start grid-row-end
   作用：使用特定的网格线确定 grid item 在网格内的位置。grid-column-start/grid-row-start 属性表示grid item的网格线的起始位置，grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。

//基本语法
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
//例子1
.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}
//例子2
.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

例子1所建立的网格
例子2所建立的网格

5. grid-column和grid-row
   作用：grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的简写形式。

//基础语法
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}
//举个例子
.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

简写模式下建立的网格

7. grid-area
   作用：给 grid item 进行命名以便于使用 grid-template-areas 属性创建模板时来进行引用。另外也可以做为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写形式。

//基础语法
.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}
//举个例子
.item-d {
  grid-area: header
}
.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

简写模式下创建的网格

8. justify-self
   作用：沿着行轴对齐grid item 里的内容（与之对应的是 align-self, 即沿列轴对齐）。 此属性对单个网格项内的内容生效。

.item-a {
  justify-self: start;
}
.item-a {
  justify-self: end;
}
.item-a {
  justify-self: center;
}
.item-a {
  justify-self: stretch;
}

start
end
center
stretch

9. align-self
   作用：沿着列轴对齐grid item 里的内容（与之对应的是 justify-self, 即沿行轴对齐）。 此属性对单个网格项内的内容生效。

//基本语法
.item {
  align-self: start | end | center | stretch;
}
//几个例子
.item-a {
  align-self: start;
}
.item-a {
  align-self: end;
}
.item-a {
  align-self: center;
}
.item-a {
  align-self: stretch;
}

start
end
center
stretch