Grid布局

一 . Grid布局

• CSS Grid 布局是CSS中最强大的布局系统，是一个二维布局系统（flexbox是一维布局系统），也就意味着它可以同时处理行和列
• grid的目标是完全改变我们基于网格的用户界面的布局方式
• Grid布局由两个核心组成部分是wrapper（父元素）和item（子元素）。wrapper是实际的grid（网格），items是grid（网格内的内容）

1 . 网格容器

• 要把wrapper元素变成grid，只要简单将其display设置为grid即可。应用 display: grid 的元素。这是所有 网格项（grid item）的直接父级元素。
• 属性
  • display：将网格定义为网格容器，并为其内容建立新的网格格式上下文。grid （生成一个块级网格） ；inline-grid （内联网格）

2 .网格项

• 是网格容器的直接子元素（注意：通过嵌套元素（也称为子网格，即 subgrid ）向下传递网格参数的能力已移至 CSS Grid 规范的 Level 2 版本(详情访问 https://www.w3.org/TR/css-grid-2/#subgrids）

3.网格线

• 构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。
• 

4.网格轨道

• 两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。
• 

5.网格单元格

• 两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。

6 .网格区域(grid-template-areas)

• 4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。

• 网格单元格可以认为是网格线行为1和2，以及列网格线1和2之间的网格区域

• 通过引用grid-area属性指定的网格区域名称来定义网格模板，重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表空单元格。这个语法本身可视作网格的可视化结构。

  • :由网格项的grid-area指定网格区域名称

  • none：不定义网格区域

  • .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”; }

  • 

  • 注意你不能 用这个语法来命名网格线，只是命名 网格区域

    • 当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线 和 起始列网格线 的名称将为 foo-start，而最后一条行网格线 和 最后一条列网格线 的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start 。

• columns（列）和rows（行）

  • 为了使其成为网格的二维容器，需要定义行和列。

  • 要定位和调整items（子元素）大小，我们将使用grid-column和grid-row属性来设置。使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

    • track-size： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位） line-name`：你可以选择的任意名称

    • grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
       grid-template-rows: <track-size> ... | <line-name> <track-size> ...;

    • 定义100px宽的3列 grid-template-columns ：100px 100px 100px;

    • 定义50px高的两行 grid-template-rows : 50px 50px；

    • grid-template-columns: 40px 50px auto 50px 40px;
       grid-template-rows: 25% 100px auto;

    • 

    • .wrapper{display: grid；grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px；}

    • 如果你的定义包含多个重复值，则可以使用 repeat() 表示法来简化定义： grid-template-columns:repeate(3,20px [col-start]);

    • 你也可以明确的指定网格线(Grid Line)名称

      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]

    • 如果多行共享相同的名称，则可通过网格线名称和计数来引用它们 grid-template-start: col-start 2;

    • fr单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如grid-temp-columns : 1fr 1fr 1fr ;该代码会将每个网格项设置为网格容器宽度的三分之一：

• 放置items（子元素）

  • 设置子元素的大小可通过网格线来设置
  • • .item1{grid-column-start :1;grid-column-end :4;}
    • 简写式 .item1{grid-column: 1 / 4 ;}
    • 表示item1占据从第一条网格线开始，到第四条网格线结束（注意：3列有4条网格线）

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

7. 简写属性grid-template

• 用于定义rows , columns , areas 简写属性 grid-template: none | / ;
• none：将所有三个属性设置为其初始值
• <grid-template-rows> / <grid-template-columns>：将 grid-template-columns 和 grid-template-rows`设置为相应地特定的值，并且设置grid-template-areas为none

游戏：

如果你觉得同时输入grid-column和grid-row也很复杂，我们还有另一种缩写。grid-area属性接受4个由’/‘分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。

举个例子如下所示：grid-area: 1 / 1 / 3 / 6;。

如果我们有很多个网格项呢？你可以任意覆盖它们不用有任何担心。用grid-area定义第二个网格项为所有未浇水的胡萝卜浇水。