grid布局

1、Grid布局概述

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

上图这样的布局，就是 Grid 布局的拿手好戏。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局 。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

2、Grid布局和flex布局的区别

Grid布局

二维布局系统：Grid布局是为了解决二维布局系统而设计的，允许同时控制行和列的布局，非常适合创建复杂的网格结构。
定义结构：通过定义grid-template-columns和grid-template-rows定义网格的行和列。通过grid-area定义网格区域，以及grid-column和grid-row等属性在项目上控制当个网格项的位置
单元格： Grid布局强调的是将页面划分为一个个单元格，每个单元格可以换分不同的元素，非常适合对称和不对称的布局。

flex布局

一维布局系统：Flex布局主要用于一维空间的布局，即沿着一个轴（横向或纵向分配空间，非常适合列表、导航条、工具栏、页脚等元素的排列）
流动和对齐：通过flex-direction控制元素的排列方向，justify-content和align-items等属性控制元素在主轴和交叉轴上的布局方式
自适应：flex布局擅长让容器内的项目自动调整大小以适应可用的空间。

在开发过程中这两种布局可以一起使用来实现更丰富的布局效果。

3、Grid布局的基本概念

学习Grid布局之前，需要了解一些基本概念。

1. 容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

html 复制代码

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

上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。

2. 行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。

3. 单元格

行和列的交叉区域，称为"单元格"（cell）。

正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

4. 网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

上图是一个 4 x 4 的网格，共有5根水平网格线和5根垂直网格线。

5. 网格轨道

网格轨道是相邻两个网格线之间的空间，可以是行轨道或列轨道。

6. 区域

使用grid-template-areas属性，可以为网格定义命名区域。这样就可以通过名称而不是行和列的数字来放置Grid项。

4、显示网格和隐式网格

显示网格就是使用grid-template-rows和grid-template-columns属性显示定义的网格。
隐式网格就是没有使用属性定义的通过使用自动布局创建出来的网格。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 100px 100px;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell">One</div>
      <div class="table-cell">Two</div>
      <div class="table-cell">Three</div>
      <div class="table-cell">Four</div>
      <div class="table-cell">Five</div>
      <div class="table-cell">Six</div>
      <div class="table-cell">Seven</div>
      <div class="table-cell">Eight</div>
    </div>
  </body>
</html>

5、设置Grid布局容器

注意： 设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

1. display: grid

表示该容器是一个grid布局的块级元素

css 复制代码

div {
    /* 默认情况下，容器元素都是块级元素 */
    display: grid;
}

2. display: inline-display

div是一个行内元素，该元素内部采用网格布局。

css 复制代码

div {
    /* 也可以是行内块元素 */
    display: inline-grid;
}

3. display: subgrid

继承父元素的grid布局

6、容器属性

1. 显示网格属性

1. grid-template-columns/rows属性

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

css 复制代码

.container {
    display: grid;
    /*下面代码指定了一个三行三列的网格，列宽和行高都是100px。*/
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

其他取值：

none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
：非负值的长度大小
：非负值且相对于网格容器的百分比。
：非负值，用单位 fr 来定义网格轨道大小的弹性系数。每个定义了的网格轨道会按比例分配剩余的可用空间。

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

css 复制代码

.container {
    display:grid;
    /*两个相同宽度的列。*/
    grid-template-columns: 1fr 1fr;
}

fr可以与绝对长度的单位结合使用，这时会非常方便。

css 复制代码

.container {
  display: grid;
    /*第一列的宽度为150像素，第二列的宽度是第三列的一半。*/
  grid-template-columns: 150px 1fr 2fr;
}

max-content：是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
min-content：是一个用来表示以网格项的最小内容来占据网格轨道的关键字。
minmax(min, max)：是一个来定义大小范围的属性，大于等于 min 值，并且小于等于 max 值。
auto：如果该网格轨道为最大时，该属性等同于 max-content ，为最小时，则等同于 min-content 。
fit-content( [ | ] ) length：表示划分为的行数 percentage：表示每行的高度

css 复制代码

grid-template-rows: 40px 4em 40px;
grid-template-rows: 1fr 2fr 1fr;
grid-template-rows: 3ch auto minmax(10px, 60px);
grid-template-rows: fit-content(40%); //将容器的行高度设置为40%，能设置几行就设置几行
grid-template-rows: repeat(auto-fill, 100px); //将容器的行高度设置为100px，能设置几行就设置几行
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;

repeat( [ | auto-fill | auto-fit ] , ) 表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复行的表达式。 positive-integer：表示要设置相同行的个数 track-list：表示设置每行的高度

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。

css 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}
grid-template-rows: repeat(3, 200px); //设置3行高度为200px的行

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

css 复制代码

grid-templete-columns: repeat(2,100px 20px 80px);
/*此行定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。*/

auto-fill关键字：有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

css 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
    /*上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。*/
}

网格线名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

css 复制代码

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

2. grid-templete-areas属性

grid-template-areas可以将网格项组合成网格区块。

取值：

none：网格容器没有定义任何的网格区块 (grid areas)。
+：多行字符串，一行字符串代表一个表格行，一个字符串中使用空格分割，分割的每一个单元代表每一列。
空格分割后的每一个单词表示一个网格项，若单词相同表示这两个网格项表示为一个网格区块，存储一个元素即可，同时如果元素要放在该网格区块需要设置css的grid-area属性为该网格区块的表示单词。（注意：最后有几个网格块，该容器内就应该有几个元素）。

示例1：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    #page {
      display: grid; /* 1.设置 display 为 grid */
      width: 100%;
      height: 250px;
      grid-template-areas:
        "head head"
        "nav  main"
        "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
      grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
      grid-template-columns: 150px 1fr;
    }

    #page > header {
      grid-area: head; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
      background-color: #8ca0ff;
    }

    #page > nav {
      grid-area: nav;
      background-color: #ffa08c;
    }

    #page > main {
      grid-area: main;
      background-color: #ffff64;
    }

    #page > footer {
      grid-area: foot;
      background-color: #8cffa0;
    }
  </style>
  <body>
    <section id="page">
      <header>Header</header>
      <nav>Navigation</nav>
      <main>Main area</main>
      <footer>Footer</footer>
    </section>
  </body>
</html>

示例2：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 200px 200px 200px;
      grid-template-rows: 100px 100px 100px;
      grid-template-areas:
        "b b a"
        "b b c"
        "b b c";
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue; 
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="grid-area: a">One</div>
      <div class="table-cell" style="grid-area: b">Two</div>
      <div class="table-cell" style="grid-area: c">Three</div>
    </div>
  </body>
</html>

2. 隐式网格属性

如果没有使用显示网格属性就会默认使用隐式网格属性。

1. grid-auto-rows

grid-auto-rows：用于指定隐式创建的行轨道大小。

取值：

：一个非负的长度。：相对于网格窗口块尺寸的非负值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 auto。：非负的、以fr为单位的维度，指定轨道的弹性因子。每个尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。 max-content:：关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。 min-content：关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。 minmax(min, max)：函数符号，定义一个不小于min且不大于max的尺寸范围。 auto：根据内容大小设置行高。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: 500px;
      /* grid-template-rows: 100px 100px 100px; */
      grid-auto-rows: auto;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 200px">Three</div>
    </div>
  </body>
</html>

2. grid-auto-columns

grid-auto-columns：用于指定隐式创建的列轨道的大小。和grid-auto-rows的取值一致，但是auto属性表示不是根据内容展开，如果是块元素auto默认占据一行。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-auto-columns: 200px;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 200px">Three</div>
    </div>
  </body>
</html>

3. grid-auto-flow

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定网格项在自动布局中怎样排列。

取值：

row：该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。
column：该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。
dense：该关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

grid-auto-flow的取值可以是上述取值的一个或两个。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template: repeat(4, 1fr) / repeat(2, 1fr);
      grid-auto-flow: row; /* or 'row', 'row dense', 'column dense' */
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 100px">Three</div>
      <div class="table-cell" style="line-height: 100px">Four</div>
      <div class="table-cell" style="line-height: 100px">Five</div>
      <div class="table-cell" style="line-height: 100px">Six</div>
      <div class="table-cell" style="line-height: 100px">Seven</div>
    </div> 
  </body>
</html>

如果修改为 grid-auto-flow: column;

3. 间距属性

column-gap（ grid-column-gap）/ row-gap (grid-row-gap)

column-gap 属性用来设置元素列之间的间隔大小。
row-gap属性用来设置行元素之间的间隙大小。

取值：

normal表示列之间的间隔宽度。在多列布局时默认间隔为 1em，其他类型布局默认间隔为 0。
：用来定义列之间的间隔大小。而且值必须是非负数的。
：用（百分比）来定义列之间的间隔大小。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template: repeat(4, 1fr) / repeat(2, 1fr);
      grid-auto-flow: column;
      column-gap: 20px;
      row-gap: 1ch;
    }
    .table-cell {
      border: black 1px solid;
      border-radius: 5px;
      background-color: lightblue;
      text-align: center;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="table-cell" style="line-height: 50px">One</div>
      <div class="table-cell" style="line-height: 100px">Two</div>
      <div class="table-cell" style="line-height: 100px">Three</div>
      <div class="table-cell" style="line-height: 100px">Four</div>
      <div class="table-cell" style="line-height: 100px">Five</div>
      <div class="table-cell" style="line-height: 100px">Six</div>
      <div class="table-cell" style="line-height: 100px">Seven</div>
    </div>
  </body>
</html>

4. 排列方式属性

1. justify-content

justify-content属性是整个内容区域在容器里面的水平位置（左中右）。

css 复制代码

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

start - 对齐容器的起始边框

end - 对齐容器的结束边框

center - 容器内部居中

stretch - 项目大小没有指定时，拉伸占据整个网格容器。

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

2. align-content

align-content属性是整个内容区域的垂直位置（上中下）。

css 复制代码

 align-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content属性的图完全一样，只是将水平方向改成垂直方向。

7、网格项属性

1. 指定网格项的行列的开始和结束位置

grid-column-start

grid-column-start CSS属性指定了一个网格项的列的开始位置，左边框所在的垂直网格线。

取值：

auto关键字，指示该属性对网格项的放置没有任何影响。
取值为具有名称的列的名称
n将第 n 条网格线用于放置网格项。如果给定负整数，则从显式网格的端边缘开始反向计数，为0无效，默认是1。
n && 取所有名称为custom-ident的列的第n个作为起始值
span && [ n || ]为网格单元定义一个跨度，表示两个列之间的距离是n个单位单元列的宽度。的值不能取span

css 复制代码

/* Keyword value */
grid-column-start: auto;

/* <custom-ident> value */
grid-column-start: somegridarea;

/* <integer> + <custom-ident> values */
grid-column-start: 2;
grid-column-start: somegridarea 4;

/* span + <integer> + <custom-ident> values */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: span somegridarea 5;

grid-complate-end

grid-column-end CSS属性指定了一个网格项的列的结束位置，右边框所在的垂直网格线。和grid-column-start取值一样。

grid-row-start

grid-row-start CSS属性指定了一个网格项的行的开始位置，上边框所在的垂直网格线和grid-column-start取值一样。

grid-row-end

grid-row-end CSS属性指定了一个网格项的行的结束位置，下边框所在的垂直网格线和grid-column-end取值一样。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 100px;
    }
    .box {
      background-color: lemonchiffon;
      border: orange 1px solid;
    }

    .box1 {
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 1;
      grid-row-end: 3;
    }

    .box2 {
      grid-column-start: 1;
      grid-row-start: 3;
      grid-row-end: 5;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
      <div class="box4 box">Four</div>
      <div class="box5 box">Five</div>
    </div>
  </body>
</html>

2. 设置单元格内的对齐方式

1. justify-items

指定单元格内容的水平对齐方式，属性值有：

stretch: [默认值]拉伸，栈满单元格整个宽度
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。

2. align-items

指定单元格内容的垂直对齐方式，属性值有：

normal：【默认值】会根据使用场景的不同表现为stretch或者start。
stretch：拉伸，占满单元格的整个宽度。
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
baseline：基线对齐（align-items属性特有属性值）

8、grid布局的复合属性

1. grid-template

rid-template 是CSS 属性grid-template-areas、grid-template-rows、grid-template-columns简写，用以定义网格中行、列与分区。

css 复制代码

grid-template: 
   "a a a" 40px
   "b c c" 40px
   "b c c" 40px / 1fr 1fr 1fr;

每个grid-template-areas的值后面的值表示的是行的高度。最后一行grid-template-areas的值后面的添加完行的高度后添加/ grid-template-columns的值表示，每列的宽度。

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <style>
    .wrapper {
      display: grid;
      height: 500px;
      grid-template: "a a a" 40px "b c c" 40px "b c c" 40px / 1fr 1fr 1fr;
    }

    .box1 {
      background-color: lime;
      grid-area: a;
    }

    .box2 {
      background-color: yellow;
      grid-row: 2 / 4;
      grid-area: b;
    }

    .box3 {
      background-color: blue;
      grid-row: span 3 / 7;
      grid-area: c;
    }
  </style>
  <body>
    <div class="wrapper">
      <div class="box1 box">One</div>
      <div class="box2 box">Two</div>
      <div class="box3 box">Three</div>
    </div>
  </body>
</html>

2. grid

在单个声明中设置以下所有属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows,grid-auto-columns, grid-auto-flow （注意：只能在单个网格声明中指定显式或隐式网格属性）。

示例1：规定行列的大小

css 复制代码

grid: 100px 150px / repeat(3, 1fr);
/*
相当于：
grid-template: 100px 150px / repeat(3, 1fr);
*/

示例2：设置网格排列方式

设置auto-flow在/的右侧，相当于设置为按列布局

css 复制代码

grid: 100px 150px / auto-flow 100px;
/*
相当于:
grid-template-rows: 100px 150px;
grid-auto-flow: column;
grid-auto-columns: 100px;
*/

示例3：区域划分

css 复制代码

grid: 'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
/*
相当于:
grid-template-areas: 'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
*/

3. gap(grid-gap)

用来设置网格行与列之间的间隙，是row-gap和column-gap的简写形式。

示例1：

css 复制代码

gap: 10px;
/*
相当于：
row-gap: 10px;
column-gap: 10px;
*/

示例2：

css 复制代码

gap: 20px 30px;
/*
相当于：
row-gap: 20px;
column-gap: 30px;
*/

4. grid-area

可以设置单元格在网格布局中的大小和位置，也可以对单元格进行命名

示例1

css 复制代码

grid-area: 1/1/4/5;
/*
设置单元格在网格布局中的大小和位置时，四个属性分别是：行开始位置/列开始位置/行结束位置/列结束位置
相当于：
grid-row: 1 / 4;
grid-column:1 / 5;
*/

示例2

css 复制代码

grid-area: header;
/*
可以使用grid-area属性来命名网格元素
命名的网格元素可以通过容器的 grid-template-areas 属性来引用
*/

5. place-content

可以同时设置align-content（内容区域在容器里面的垂直位置）和justify-content（内容区域在容器里面的水平位置）

示例1

css 复制代码

place-content: center;
/*
相当于：
align-content: center;
justify-content: center;
*/

示例2

css 复制代码

place-content: start end;
/*
相当于：
align-content: start;
justify-content: end;
*/

6. place-self

可以同时设置align-self（单个单元格内容的垂直位置）和justify-self（单个单元格内容的水平位置）

示例1

css 复制代码

place-self: center;
/*
相当于：
align-self: center;
justify-self: center;
*/

示例2

css 复制代码

place-self: start end;
/*
相当于：
align-self: start;
justify-self: end;
*/

7. grid-column/grid-row

grid-column属性定义了网格元素列的开始和结束位置，也可以使用关键字 "span" 来定义元素将跨越的列数。 示例1：在第 1 列开始，在第 4 列前结束

css 复制代码

grid-column: 1 / 4;
/*
相当于：
grid-column-start: 1;
grid-column-end: 4;
*/

示例2：在第 2 列开始，横跨2列

css 复制代码

grid-column: 2 / span 2;

grid-row属性定义了网格元素行的开始和结束位置，也可以使用关键字 "span" 来定义元素将跨越的行数。 示例3：在第 1 行开始，在第 4行前结束

css 复制代码

grid-row: 1 / 4;
/*
相当于：
grid-row-start: 1;
grid-row-end: 4;
*/

示例4：在第 2 行开始，横跨2行

css 复制代码

grid-row: 2 / span 2;

align-content: center; justify-content: center; */

css 复制代码

**示例2**

```css
place-content: start end;
/*
相当于：
align-content: start;
justify-content: end;
*/

6. place-self

可以同时设置align-self（单个单元格内容的垂直位置）和justify-self（单个单元格内容的水平位置）

示例1

css 复制代码

place-self: center;
/*
相当于：
align-self: center;
justify-self: center;
*/

示例2

css 复制代码

place-self: start end;
/*
相当于：
align-self: start;
justify-self: end;
*/

7. grid-column/grid-row

grid-column属性定义了网格元素列的开始和结束位置，也可以使用关键字 "span" 来定义元素将跨越的列数。 示例1：在第 1 列开始，在第 4 列前结束

css 复制代码

grid-column: 1 / 4;
/*
相当于：
grid-column-start: 1;
grid-column-end: 4;
*/

示例2：在第 2 列开始，横跨2列

css 复制代码

grid-column: 2 / span 2;

grid-row属性定义了网格元素行的开始和结束位置，也可以使用关键字 "span" 来定义元素将跨越的行数。 示例3：在第 1 行开始，在第 4行前结束

css 复制代码

grid-row: 1 / 4;
/*
相当于：
grid-row-start: 1;
grid-row-end: 4;
*/

示例4：在第 2 行开始，横跨2行

css 复制代码

grid-row: 2 / span 2;