CSS - 布局 - display:grid / inline-grid - 网格模型布局

介绍

CSS 网格是一个用于 web 的 二维布局系统。利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。

什么是网格布局？

网格是由一系列水平及垂直的线构成的一种布局模式。根据网格，提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。

给<div>这类块状元素的display属性设置为grid来定义一个网络。声明一个块级的网格。
给<span>这类内联元素的display属性设置为inline-grid来定义一个网络。声明一个内联级的网格

概念介绍

网格容器（Grid Container）

当一个元素的属性设置为display：grid时，它是所有网格项（Grid Items）的直接父元素。在下面示例中container就是网格容器。

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

网格项（Grid Item）

网格容器的子节点元素。这里 item元素都是网格项，但是sub-item不包含其中。

<div class="container">
  <div class="item"></div> 
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

网格线（Gird Line）

分界线构成了网格的结构。它们可以是垂直的("列网格线")也可以是水平的("行网格线")，并且位于一行或一列的任一侧。图中的红色的线。

网格轨道（Grid Track）

两个相邻网格线之间的空间。你可以把它们想象成网格的列或行。图中的红色和蓝色的部分。

红色：第三行和第四行网线之间的网格轨道。
蓝色：第三列和第四列网线之间的网格轨道。

网格单元格（Grid Cell）

两个相邻的行网格线和两个相邻的列网格线之间的空间。图中的红色部分。

是行网格线line 2、line 3 与列网格线line 2、 line 3之间的网格单元格。

网格区域（Grid Area）

网格区域为四条网格线所包围的总空间。网格区域可以由任何数量的网格单元组成。

创建一个网格布局

.css
#content3{
    margin-top: 10px;
    padding: 0px;
    border: 5px solid black;    
    display: grid;
}

效果：

注意：与弹性盒子不同的是，在定义网格后，网页并不会马上发生变化。

因为display: grid的声明只创建了一个只有一列的网格，所以你的子项还是会像正常布局流那样从上而下一个接一个的排布。

为了让我们的容器看起来更像一个网格，需要使用一些属性，在Grid布局中，所有相关CSS属性正好分为两拨，一拨作用在grid容器上，还有一拨作用在grid子项上。

如图：

这些属性理解并不难，主要是比较多，熟练以后就好了。

属性 `grid-template-columns`、`grid-template-rows`、

grid-template-columns：定义网格线的名称和网格轨道的尺寸大小。基于列的维度。
grid-template-rows：定义网格线的名称和网格轨道的尺寸大小。基于行的维度。

使用 grid-template-columns、grid-template-rows 创建的网格叫做 显式网格。

语法：

grid-template-columns/rows = 
  none                       |
  <track-list>               |
  <auto-track-list>          |
  subgrid <line-name-list>?  

<track-list> = 
  [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?  

<auto-track-list> = 
  [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?  

<line-name-list> = 
  [ <line-names> | <name-repeat> ]+  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage> )                

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<track-breadth> = 
  <length-percentage>  |
  <flex>               |
  min-content          |
  max-content          |
  auto                 

<inflexible-breadth> = 
  <length-percentage>  |
  min-content          |
  max-content          |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage>

语法取值：

关键字
grid-template-columns: none;

<track-list> values
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

 <auto-track-list> values
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

Global values 
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: unset;

取值：

<length>：非负值的长度大小。
<percentage>：非负值且相对于网格容器的百分比值。
<flex>：非负值，用单位 fr 来定义网格轨道大小的弹性系数。网格轨道会按比例分配剩余的可用空间（除去非弹性项后剩余的空间）。
max-content：是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
min-content：是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
<line-name>：任意定义网格线的名称。可以有1个名字，或多个名字。使用属性值subgrid时，可以组合使用。
none：这个关键字表示不明确的网格。所有的列和其大小都将由grid-auto-columns 属性隐式的指定。
auto：如果该网格轨道为最大时，该属性等同于 max-content ，为最小时，则等同于 min-content。
- 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性align-content和 justify-content拉伸。
subgrid：如果你的网格容器本身是一个网格项（即嵌套网格），你可以使用此属性来表示你希望其行/列的大小从其父项继承，而不是自定义属性。

minmax(min, max)：定义了一个长宽范围的闭区间。可用<length>、<percentage>、<flex>、max/min-content、auto。
fit-content( [ <length> | <percentage> ] )：
行为表现为fit-content(stretch)在实践中，这意味着盒子将使用可用空间，但永远不会超过max-content。类似于auto的计算（即minmax(auto, max-content)）。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )：表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。以一种更简洁的方式去表示大量和重复列的表达式。
- autp-fill：模式填充。在网格容器宽度大于网格项的最小宽度总和时就会有区别。
- autp-fit：模式填充。

示例1：

.css
#content1,
#content2{
    margin-top: 10px;
    padding: 0px;
    border: 5px solid black;
    
    display: grid;  
}
#content1{
    grid-template-columns: 100px 100px 100px;
}
#content2{
    grid-template-columns: 200px 100px 200px;
}
#content3{
    grid-template-columns: 1fr 2fr 1fr;
}

效果：

示例2：repeat()

#content1{
    grid-template-columns: repeat(2,100px) repeat(2,80px) auto;
}
#content2{
    grid-template-columns:  repeat(auto-fill ,minmax(100px,1fr));
}
#content3{
    grid-template-columns:  repeat(auto-fit ,minmax(100px,1fr));
}

效果：

代码解析：

当屏幕宽度大于 1000px 时，可以看到auto-fill 不填满网格轨道，auto-fit 填满网格轨道。

repeat(2,100px) repeat(2,80px) auto：前面2列宽度都是100px，紧跟着2列宽度是80px，剩下1列宽度auto。

示例2：fit-content()

#content1{
    grid-template-columns: auto fit-content(100px) fit-content(100px);
}

效果：

属性 `grid-auto-columns`、`grid-auto-rows`、

grid-auto-columns：指定了隐式创建的网格纵向轨道 track 的宽度。
grid-auto-rows：指定了隐式创建的网格横向轨道 track 的宽度。

使用 grid-auto-columns、grid-auto-rows 创建的网格叫做 隐式网格。

简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。

语法：

grid-auto-rows = 
  <track-size>+  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage> )                

<track-breadth> = 
  <length-percentage>  |
  <flex>               |
  min-content          |
  max-content          |
  auto                 

<inflexible-breadth> = 
  <length-percentage>  |
  min-content          |
  max-content          |
  auto                 

<length-percentage> = 
  <length>      |
  <percentage>

语法示例：

/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* <length> values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* <percentage> values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* <flex> values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;

取值：

`<length>
一个非负的长度。
<percentage>：相对于网格窗口块尺寸的非负 <percentage> 值。如果网格容器的块尺寸是不确定的，则百分比值将被视为 auto。
<flex>：非负的、以 fr 为单位的维度指定轨道的弹性因子。每个 <flex>尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。
- 当使用在 minmax() 符号外时，意味着最小值为 auto (例： minmax(auto, <flex>))。
max-content：关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。
min-content：关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。
minmax(min, max)：函数符号，定义一个不小于min且不大于max的尺寸范围。
如果max比min小，则max会被忽略，函数会被用作min处理。作为最大值，<flex> 值设置了轨道的弹性因子。作为最小值，会被当作 0 处理（或者最小内容——当网格容器指定了尺寸为最小内容）。
auto：关键字，当用来指定最大值时与最大内容一致，当用来指定最小值时，它表示轨道中所有网格元素最小尺寸中的最大值（由min-width/min-height指定）。

注意：auto 轨道尺寸（且仅有 auto 轨道尺寸）可配合align-content 和justify-content 属性使用。

示例：

.css
#grid {
    display: grid;
    grid-template-areas: ". . ."
                         ". . .";
    grid-auto-columns: 40px;
    grid-auto-rows: 30px;
}
#item1{background-color: red;}
#item2{background-color: lime;}
#item3{background-color: orange;}

.html
<div id="grid">
        <div id="item1"></div>
        <div id="item2"></div>
        <div id="item3"></div>
      </div>

通过查看器查看效果：

无法使用repeat()。

属性 `grid-template-areas`

网格区域。用于设置网格布局。
grid-area 属性可以对网格元素进行命名。命名的网格元素可以通过容器的 grid-template-areas属性来引用。

语法：

grid-template-areas = 
  none       |
  <string>+

语法示例：

关键字
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b"; 一行 两列
grid-template-areas: "a b b" 两行 三列
                     "a c d"; 

/* Global values */
grid-template-areas: inherit;  继承 
grid-template-areas: initial;  默认值 
grid-template-areas: unset;  未设置

取值：

none：网格容器没有定义任何的网格区块 (grid areas)。
<string>+：每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元 (cell) 会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块 (grid area)。非矩形的网格区块是无效的。

示例：

.css
.grid1{
    display: grid;
    width: 100%;
    height: 200px;
    border: 2px solid black;
    grid-template-areas: "head head head"
                         "nav  main side"
                         "nav  foot foot";
    grid-template-columns: 150px 1fr;
    grid-template-rows: 50px 1fr 30px;
}
.header1{
    grid-area: head;
    background-color: bisque;
}
.nav1{
    grid-area: nav;
    background-color: #ccc;
}
.main1{
    grid-area: main;
    background-color: darkgreen;
}
.footer1{
    grid-area: foot;
    background-color: cornsilk;
}
.side1{
    grid-area: side;
    background-color: purple;
}
.html
<section class="grid1">
    <header class="header1">头部区域</header>
    <nav class="nav1">导航区域</nav>
    <main class="main1">内容区域</main>
    <footer class="footer1">尾部区域</footer>
    <div class="side1">侧边区域</div>
</section>

效果：

通过查看器查看效果：

代码解析：

display: grid;：设置 display 为 grid

grid-template-areas: "head head head" "nav main side" "nav foot foot";：区域划分当前为三行三列

grid-template-rows: 50px 1fr 30px; 、grid-template-columns: 150px 1fr;：各区域宽高设置

grid-area: xxx;：指定当前元素所在的区域位置，从 grid-template-areas 选取值。

属性 `grid-area`

指定网格元素在网格布局中的大小和位置，也可以对网格元素进行命名。

grid-area 是以下属性的简写属性：

grid-row-start：指定在哪一行开始显示网格元素。
grid-column-start：指定在哪一列开始显示网格元素。
grid-row-end：指定哪一行停止显示网格元素，或跨越多少行。
grid-column-end：指定哪一列停止显示网格元素，或跨越多少列。

grid-area：也可以理解成 Excel中单元格合并，在默认的网格列表中，将哪个位置的哪几个相邻的单元格合并成一个单元格）

语法：

grid-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

语法示例：

/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* <integer> && <custom-ident>? values */
grid-area:  4 some-grid-area;
grid-area:  4 some-grid-area / 2 another-grid-area;

/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;

取值：

auto：该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）1自动放置。
<custom-ident>：自定义关键字数据类型。
<integer> && <custom-ident>?：将第 n 条网格基线用来给网格单元布置。值不能为 0。
- 如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。
- 如果提供的是 <custom-ident>，那么只有以此命名的基线才会被计算。
- 如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。
span && [ <integer> || <custom-ident> ]：为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。
- 如果提供的是<custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。
- 如果忽略 <integer> ，它就默认设为 1。它的值也不能为 0。

示例1：可以简写，也可以扩展开写

.wrapper {
    display: grid;
    grid-template-columns: [col-1] 100px [col-2] 100px [col-3] 100px [col-4];
    grid-auto-rows: 30px;
}
.box1 {
    grid-area: 1 / 1 / 3 / 4; 
    background-color: orange;
}
.box2 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    // grid-row-end: 4;
    background-color: red;
}
.box3 {
    grid-area: span 2 / span 1; 
    background-color: yellow;
}
.box4 {
    grid-column-start: col-1;
    grid-column-end: col-3;
    grid-area: span 1;
    background-color: lawngreen;
}

效果：

代码解析：

grid-area: 1 / 1 / 3 / 4;：规则： grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;。
意思是：网格元素.box1所占的网格区域是，网格行线line1 到 line3的区域，网格列线从line1 到 line4的区域。

grid-area: span 2 / span 1;：意思是，网格元素.box3所占的网格区域是，从其默认的位置开始，网格行上占 2行 / 网格列上占 1 列。

// grid-row-end: 4;：可以注释掉，代表，网格元素.box2 默认只占 1 行的网格区域。

grid-column-start: col-1;、grid-column-end: col-3;：意思是，网格元素.box4，拥有从网格列线 col-1 到网格列线 col-3 之间的网格区域。

grid-area: span 1;：意思是，网格元素.box4，只有一行。也可以不写。

属性 `grid-row`、`grid-column`

grid-row：用于指定网格元素行的开始和结束位置。
是一个简写的属性，其包含：
- grid-row-start
- grid-row-end
grid-column：用于指定网格元素列的开始和结束位置。
是一个简写的属性，其包含：
- grid-column-start
- grid-column-end

语法：

grid-column = 
  <grid-line> [ / <grid-line> ]?  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

语法示例

grid-column: auto;

/* with line numbers */
grid-column: 1;
grid-column: 1 / 3;
grid-column: 1 / span 2;

/* with line names */
grid-column: main-start;
grid-column: main-start / main-end;

/* Global values */
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

示例：

.wrapper {
    display: grid;
    grid-template-columns: [col-1] 60px [col-2] 60px [col-3] 60px [col-4] 60px [col-5];
    grid-template-rows: [ro-1] 30px [ro-2] 30px [ro-3] 30px [ro-4];
}

.box1{
    background-color: red;
    grid-column: col-1 / 4;
}
.box2{
    background-color: chocolate ;
    grid-column: 1 / span 2;
}
.box3{
    background-color: green;
    grid-column: 3;
    grid-row: span 2 / 4;
}
.box4{
    background-color: palevioletred;
    grid-column: 4;
    grid-row: 1 / 4;
}
.box5{
    background-color: cadetblue;
}

效果：

代码解析：

grid-column: col-1 / 4;：网格元素 .box1 占从网格列线col-1 到网格列线line4的区域。

grid-column: 1 / span 2;：网格元素 .box2 占从网格列线line1 开始，往后占 2 列的区域。

grid-row: span 2 / 4;：网格元素 .box3 占 2 行的区域，到网格行线 line4 结束。

grid-row: 1 / 4;：网格元素 .box4 占从网格行线 line1 到网格行线 line4 的区域。

属性 `grid-template`

用以定义网格中行、列、分区。
是简写属性，包含一下属性：

grid-template-rows
grid-template-columns
grid-template-areas

语法：

grid-template =
none                                                |
[ <'grid-template-rows'> / <'grid-template-columns'> ]  |
[ <line-names>?  <string> <track-size>?  <line-names>?  ]+ [ / <explicit-track-list> ]?

<line-names> =
'[' <custom-ident>* ']'

<track-size> =
<track-breadth>                                   |
minmax( <inflexible-breadth> , <track-breadth> )  |
fit-content( <length-percentage> )

<explicit-track-list> =
[ <line-names>?  <track-size> ]+ <line-names>?

<track-breadth> =
<length-percentage>  |
<flex>               |
min-content          |
max-content          |
auto

<inflexible-breadth> =
<length-percentage>  |
min-content          |
max-content          |
auto

<length-percentage> =
<length>      |
<percentage>

语法示例：

关键词
grid-template: none;

为 grid-template-rows / grid-template-columns
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

为 grid-template-areas grid-template-rows / grid-template-column
grid-template: "a a a"
               "b b b";
grid-template: "a a a" 20%
               "b b b" auto;
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;

/* 为全局值 */
grid-template: inherit;
grid-template: initial;
grid-template: unset;

取值：

none：关键词，设上文“所简写属性”为none，即恢复默认设置。行列隐式生成，grid-auto-rows与grid-auto-columns定其尺寸。
<'grid-template-rows'> / <'grid-template-columns'>：
指定grid-template-rows与grid-template-columns之值，并设grid-template-areas为none。
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?：
设grid-template-areas为列的<string>、
grid-template-columns为<explicit-track-list>（默认为none）、
grid-template-rows为<track-size>（默认为auto）并拼接尺寸前后所定义之行。
注意：轨道被用以与“ASCII art”（即字符画，此处指<string>）中行列逐一视觉对齐，故<explicit-track-list>中不允许repeat()。

注意：grid可如此用，但将重置隐式网格属性。使用grid(而不是grid-template)来防止这些值单独级联。

示例1：

.wrapper {
    display: grid;
    grid-template: repeat(2,30px) / 60px 50px 70px;
}
.wrapper div:nth-child(odd){
    background-color: red;
}

效果：

示例2：

.wrapper {
    display: grid;
    grid-template: "a a a" 30px
                   "b b b" 40px
                    / 50px 60px 70px;
}
.wrapper div:nth-child(odd){
    background-color: red;
}

效果：

代码解析：

"a a a" 30px：设置第一行行高 30px，有 3 列；

"b b b" 40px：设置第二行行高 40px，有 3 列；

/ 50px 60px 70px;：设置列宽分别是 50px 60px 70px；

属性 `gap`、`row-gap`、`column-gap`

用来设置网格行与列之间的间隙大小。

是简写属性

row-gap：用来设置行元素之间的间隙大小；
column-gap：用来设置列元素之间的间隙大小；

语法：

row-gap = 
  normal                     |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

语法示例：

/* <length> values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> value */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: revert;
row-gap: revert-layer;
row-gap: unset;

取值：

<length-percentage>：表示行之间的间隔宽度。<percentage>表示相对栅格容器的百分比。

示例：

.wrapper {
    display: grid;
    grid-template: "a a a" 30px
                   "b b c" 40px
                    / 50px 60px 70px;
    gap: 5px;
}
.wrapperr {
    display: grid;
    grid-template: "a a a" 30px
                   "b b c" 40px
                    / 50px 60px 70px;
    gap: 5px 10px;
}
.wrapperrr {
    display: grid;
    grid-template: "a a a" 30px
                   "b b c" 40px
                    / 50px 60px 70px;
    row-gap: 5px;
    column-gap: 10px;
}
.wrapper div:nth-child(odd),
.wrapperr div:nth-child(odd),
.wrapperrr div:nth-child(odd){
    background-color: red;
}

效果：

属性 `grid-auto-flow`

控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

语法：

grid-auto-flow = 
  [ row | column ]  ||
  dense

语法示例：

关键字
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;

此属性有两种形式：

单个关键字：row、column、 dense 中的一个。
两个关键字：row dense 、 column dense。

取值：

row：默认值，通过逐行填充来排列元素，在必要时增加新行。
column：通过逐列填充来排列元素，在必要时增加新列。
dense：使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

示例：`row`、`column`、`dense`

#grid1 ,
#grid2,
#grid3{
    height: 100px;
    width: 150px;
    display: grid;
    grid-gap: 5px;
    grid-template: repeat(4, 1fr) / repeat(2, 1fr);
}
#grid1{
    grid-auto-flow: row;
}
#grid2{
    grid-auto-flow: column;
}
#grid3{
    grid-auto-flow: dense;
}

效果：

示例2：修改网格元素#item1的位置

#item1 {
    grid-row-start: 3;
}

效果：

示例3：修改网格元素#item4的位置

#item4 {
    grid-row-start: 3;
}

效果：

代码解析：

分析之前要明确，网格元素 #item1、#itme4位置是不会挪动的，因为我们给定了其具体的位置。

唯一会变化的只有网格元素#item2、#item3、#item5，然后根据空白位置以及给定的属性分析，这些网格元素的变化就会一目了然了。

属性 `grid` 终极简写属性...

可以用来设置以下属性：

显式网格属性： grid-template-rows、grid-template-columns 、 grid-template-areas。
隐式网格属性：grid-auto-rows、grid-auto-columns 、grid-auto-flow。
间距属性： column-gap 、row-gap。

语法:

grid = 
  <'grid-template'>                                   |
  <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?  |
  [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

示例：

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

.container{
    grid: 200px auto / 1fr auto 1fr;
}
等价
.container{
    grid-template-rows: 200px auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
}

.container{
    grid: column 1fr / auto;
}
等价
.container{
    grid-auto-flow: column;
    grid-auto-rows: 1fr;
    grid-auto-columns: auto;        
}

属性 `justify-items`、`justify-self`

设置单个网格元素在网格容器中内联轴上对其方式。

取值：

start : 内容在网格区域中左端对齐
end ：内容在网格区域中右端对齐
center ：内容在网格区域居中对齐
stretch ：内容宽度占满整个网格区域（默认值）

示例1：`justify-items`

#grid1{
    justify-items: start;
}
#grid2{
    justify-items: end;
}
#grid3{
    justify-items: stretch;
}
#grid4{
    justify-items: center;
}

效果：

示例2：`justify-self`

#item1 {
    justify-self: start;
}
#item2 {
    justify-self: end;
}
#item3 {
    justify-self: center;
}
#item4 {
    justify-self: stretch;
}

效果：

属性 `align-items`

设置单个网格元素在网格容器中纵轴上对其方式。

取值：

start : 内容在网格区域中左端对齐
end ：内容在网格区域中右端对齐
center ：内容在网格区域居中对齐
stretch ：内容宽度占满整个网格区域（默认值）
baseline/first baseline/last baseline：按照基线对齐。

示例1：`align-items`

#grid1{
    align-items: flex-start;
}
#grid2{
    align-items: flex-end;
}
#grid3{
    align-items: stretch;
}
#grid4{
    align-items: center;
}

效果：

示例2：`align-self`

#item1 {
    align-self: start;
}
#item2 {
    align-self: end;
}
#item3 {
    align-self: center;
}
#item4 {
    align-self: stretch;
}

效果：

属性 `justify-content`

如果你的网格项目都是使用像px这样的非响应式单位来计算的，就有可能出现一种情况－－网格的总大小可能小于其网格容器的大小。在这种情况下，您可以设置网格容器内的网格的对齐方式。

取值：

start：网格在网格容器中左端对齐
end：网格在网格容器中右端对齐
center：网格在网格容器中居中对齐
stretch：调整网格项的大小，使其宽度填充整个网格容器。
space-around：在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半
space-between：在网格项之间设置偶数个空格间隙，其最边缘没有间隙
space-evenly：在网格项之间设置偶数个空格间隙，其最边缘间隙与其相同

示例1：`space-around`、`space-evenly`、`space-between`

#grid1,
#grid2,
#grid3{
    height: 80px;
    width: 150px;
    display: grid;
    grid-template-areas: "a a a"
                         "a a a";
}
#grid1{
    justify-content: space-around;
}
#grid2{
    justify-content: space-evenly;
}
#grid3{
    justify-content: space-between;
}

效果：

示例2：`stretch`、`start`、`center`、`end`

#grid1{
    justify-content: start;
}
#grid2{
    justify-content: center;
}
#grid3{
    justify-content: end;
}
#grid4{
    justify-content: stretch;
}

效果：

属性 `align-content`

如果你的网格项目都是使用像px这样的非响应式单位来计算的，就有可能出现一种情况－－网格的总大小可能小于其网格容器的大小。在这种情况下，您可以设置网格容器内的网格的对齐方式。此属性沿着行轴对齐网格。

取值：

start：网格在网格容器中左端对齐
end：网格在网格容器中右端对齐
center：网格在网格容器中居中对齐
stretch：调整网格项的大小，使其宽度填充整个网格容器。
space-around：在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半
space-between：在网格项之间设置偶数个空格间隙，其最边缘没有间隙
space-evenly：在网格项之间设置偶数个空格间隙，其最边缘间隙与其相同

示例1：`space-around`、`space-evenly`、`space-between`

#grid1,
#grid2,
#grid3{
    height: 80px;
    width: 150px;
    display: grid;
    grid-template-areas: "a a a"
                         "a a a";
}
#grid1{
    align-content: space-around;
}
#grid2{
    align-content: space-evenly;
}
#grid3{
    align-content: space-between;
}

效果：

示例2：`stretch`、`start`、`center`、`end`

#grid1{
    align-content: start;
}
#grid2{
    align-content: center;
}
#grid3{
    align-content: end;
}
#grid4{
    align-content: stretch;
}

效果：

align-items

属性 `place-items`、`place-self`、`place-content`

语法：

place-items = 
  <'align-items'> <'justify-items'>?  

place-self = 
  <'align-self'> <'justify-self'>?

place-content = 
  <'align-content'> <'justify-content'>?

取值：

参考 place-items值

参考 place-self值

参考 place-content值

place-content示例：`space-around`、`space-evenly`、`space-between`

#grid1,
#grid2,
#grid3{
    height: 80px;
    width: 150px;
    display: grid;
    grid-template-areas: "a a a"
                         "a a a";
}
#grid1{
    place-content: space-around;
}
#grid2{
    place-content: space-evenly space-around;
}
#grid3{
    place-content: space-between space-evenly;
}

效果：

属性值 `grid`与`inline-grid`的区别

grid：将对象作为网格容器显示。
inline-grid：将对象作为内联块级网格容器显示。

一句话来描述就是当Grid 容器没有设置宽度大小限制时，当display 指定为 grid 时，Grid 容器的宽度会填充父容器，当display指定为 inline-grid 时，Grid 容器的宽度会包裹grid Item。

inline-grid效果：

grid效果：

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,463评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,868评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,213评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,666评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,759评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,725评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,716评论 3赞 415
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,484评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,928评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,233评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,393评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,073评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,718评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,308评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,538评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,338评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,260评论 2赞 352

CSS - 布局 - display:grid / inline-grid - 网格模型布局

介绍

什么是网格布局？

概念介绍

网格容器（Grid Container）

网格项（Grid Item）

网格线（Gird Line）

网格轨道（Grid Track）

网格单元格（Grid Cell）

网格区域（Grid Area）

创建一个网格布局

属性 grid-template-columns、grid-template-rows、

语法：

语法取值：

取值：

示例1：

示例2：repeat()

示例2：fit-content()

属性 grid-auto-columns、grid-auto-rows、

语法：

语法示例：

取值：

示例：

属性 grid-template-areas

语法：

语法示例：

取值：

示例：

属性 grid-area

语法：

语法示例：

取值：

示例1：可以简写，也可以扩展开写

属性 grid-row、grid-column

语法：

语法示例

示例：

属性 grid-template

语法：

语法示例：

取值：

示例1：

示例2：

属性 gap、row-gap、column-gap

语法：

语法示例：

取值：

示例：

属性 grid-auto-flow

语法：

语法示例：

此属性有两种形式：

取值：

示例：row、column、dense

示例2：修改 网格元素#item1的位置

示例3：修改 网格元素#item4的位置

属性 grid 终极简写属性...

语法:

示例：

属性 justify-items、justify-self

取值：

示例1：justify-items

示例2：justify-self

属性 align-items

取值：

示例1：align-items

示例2：align-self

属性 justify-content

取值：

示例1：space-around、space-evenly、space-between

示例2：stretch、start、center、end

属性 align-content

取值：

示例1：space-around、space-evenly、space-between

示例2：stretch、start、center、end

属性 place-items、place-self、place-content

语法：

取值：

place-content示例：space-around、space-evenly、space-between

属性值 grid与inline-grid的区别

属性 `grid-template-columns`、`grid-template-rows`、

属性 `grid-auto-columns`、`grid-auto-rows`、

属性 `grid-template-areas`

属性 `grid-area`

属性 `grid-row`、`grid-column`

属性 `grid-template`

属性 `gap`、`row-gap`、`column-gap`

属性 `grid-auto-flow`

示例：`row`、`column`、`dense`

示例2：修改网格元素#item1的位置

示例3：修改网格元素#item4的位置

属性 `grid` 终极简写属性...

属性 `justify-items`、`justify-self`

示例1：`justify-items`

示例2：`justify-self`

属性 `align-items`

示例1：`align-items`

示例2：`align-self`

属性 `justify-content`

示例1：`space-around`、`space-evenly`、`space-between`

示例2：`stretch`、`start`、`center`、`end`

属性 `align-content`

示例1：`space-around`、`space-evenly`、`space-between`

示例2：`stretch`、`start`、`center`、`end`

属性 `place-items`、`place-self`、`place-content`

place-content示例：`space-around`、`space-evenly`、`space-between`

属性值 `grid`与`inline-grid`的区别