CSS 学习笔记 - 网格布局（栅格系统）

￡神魔★判官ぃ 2022-12-11 15:28 381阅读 0赞

### CSS 学习笔记 - 网格布局（栅格系统） ###

*  开启网格模式
 *  基本概念
 *  属性说明
 *   *  容器属性
     *  内容属性
 *  效果展示
 *   *  grid-template-rows、grid-template-columns 基本用法
     *  grid-template 简写
     *  gap(grid-gap) 简写
     *  grid-auto-rows、grid-auto-columns 设置隐式行列轨道
     *  grid-area 网格内容定位简写 + 定义线名称
     *  span 跨度（使用偏移量定位）
     *  auto-fit 、auto-fill 自动分配行列数
     *  grid-template-areas 网格区域
     *  grid-auto-flow 控制隐式网格的扩充方向
 *  对齐控制
 *  参考资料

网格布局（栅格系统）

*  **官方解释**：CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。  
    像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。
 *  **个人理解**：
    
     *  要说这个`栅格系统`玩过地图编辑器的同学就很好理解，因为栅格概念在地图编辑上早就普遍应用了。
     *  没玩过地图编辑器，总玩过游戏吧（帝国、魔兽、模拟人生、植物大战僵尸、皇帝、海岛奇兵。。。）但凡带点策略性质，需要建造或放置单位的对栅格概念都不会陌生。
     *  都没玩过也没关系，页面就相当于客厅的空白平面图，栅格就相当于地板砖。以后摆家具就参考地砖划定的边界来摆放。（茶几放在哪几块地砖上，沙发放在哪几块地砖上。）

# 开启网格模式 #

将容器设置为`网格模式`（默认块级）

display: grid;

将容器设置为`行内`网格模式 (多个网格容器可以在一行)

display: inline-grid;

开启`网格模式`后`当前元素`就变成了一个`网格容器`，它的所有`直系子元素`将成为`网格元素`。

# 基本概念 #

<table> 
 <thead> 
  <tr> 
   <th align="left">名词</th> 
   <th align="left">解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">显示网格</td> 
   <td align="left">属性 <a rel="nofollow"><code>grid-template-rows</code></a> 、 <a rel="nofollow"><code>grid-template-columns</code></a>、<a rel="nofollow"><code>grid-template-areas</code></a> 明确定义的<code>轨道</code>就在<code>显式网格</code>中。</td> 
  </tr> 
  <tr> 
   <td align="left">隐式网格</td> 
   <td align="left">当显示网格中放下不，或是内容项被故意定位到<code>显示网格</code>之外。系统就会隐藏创建网格来承纳这些内容。<br>属性 <a rel="nofollow"><code>grid-auto-rows</code></a> 和 <a rel="nofollow"><code>grid-auto-columns</code></a> 可定义隐式网格中轨道的大小。</td> 
  </tr> 
  <tr> 
   <td align="left">嵌套网格</td> 
   <td align="left">网格容器只影响直接子对象。如果下一级还想使用网格布局继续嵌套使用即可。</td> 
  </tr> 
  <tr> 
   <td align="left">重叠顺序</td> 
   <td align="left">多个元素覆盖到同一区域时即会产生重叠。基本原则<code>后来居上</code>，可以手动设置 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index" rel="nofollow">z-index</a> 控制</td> 
  </tr> 
  <tr> 
   <td align="left">1. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Tracks" rel="nofollow">网格轨道 Grid_Tracks</a></td> 
   <td align="left">两条<code>网格线</code>之间的空间。</td> 
  </tr> 
  <tr> 
   <td align="left">2. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Rows" rel="nofollow">网格行 Grid_Row</a></td> 
   <td align="left"><a rel="nofollow"><code>Grid布局</code></a>中的<code>水平轨道</code>，即两个水平网格线之间的空间。它通过属性 <a rel="nofollow"><code>grid-template-rows</code></a>定义</td> 
  </tr> 
  <tr> 
   <td align="left">3. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Column" rel="nofollow">网格列 Grid_Column</a></td> 
   <td align="left"><a rel="nofollow"><code>Grid布局</code></a>中的<code>垂直轨道</code>，即两个垂直网格线之间的空间。它通过属性 <a rel="nofollow"><code>grid-template-columns</code></a>定义</td> 
  </tr> 
  <tr> 
   <td align="left">4. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Lines" rel="nofollow">网格线 Grid_Lines</a></td> 
   <td align="left">用于划分网格单元格的线（从边框算起，到边框结束）</td> 
  </tr> 
  <tr> 
   <td align="left">5. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Cell" rel="nofollow">单元格 Grid_Cell</a></td> 
   <td align="left">它是网格中的最小单元</td> 
  </tr> 
  <tr> 
   <td align="left">6. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Areas" rel="nofollow">网格区域 Grid_Areas</a></td> 
   <td align="left">是网格中由一个或者多个网格单元格组成的一个矩形区域。</td> 
  </tr> 
  <tr> 
   <td align="left">7. <a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Gutters" rel="nofollow">网格间距 Gutters</a></td> 
   <td align="left">是网格轨道之间的间距。可以通过 grid-column-gap，grid-row-gap 或者 grid-gap 在Grid布局中创建。</td> 
  </tr> 
  <tr> 
   <td align="left"><font>———————————</font></td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

# 属性说明 #

## 容器属性 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>简写形式</th> 
   <th align="left">说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a rel="nofollow"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/%E7%BD%91%E6%A0%BC-%E6%A8%A1%E6%9D%BF-%E5%88%97" rel="nofollow">grid-template-rows</a></td> 
   <td></td> 
   <td align="left">定义网格行：网格线的名称和网格轨道的尺寸大小。 （由此属性定义的叫<code>显示网格</code>。当内容超出显示定义时，系统还会隐式创建网格来放这些多出的内容元素）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a rel="nofollow"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-columns" rel="nofollow">grid-template-columns</a></td> 
   <td></td> 
   <td align="left">同上。定义网格列</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template" rel="nofollow">grid-template</a></td> 
   <td>是</td> 
   <td align="left">grid-template-rows、grid-template-columns 和 grid-template-areas 的简写形式</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a rel="nofollow"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-rows" rel="nofollow">grid-auto-rows</a></td> 
   <td></td> 
   <td align="left">用于指定隐式创建的<code>行</code>轨道大小。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a rel="nofollow"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-columns" rel="nofollow">grid-auto-columns</a></td> 
   <td></td> 
   <td align="left">用于指定隐式创建的<code>列</code>轨道大小。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a rel="nofollow"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-auto-flow" rel="nofollow">grid-auto-flow</a></td> 
   <td></td> 
   <td align="left">控制（<code>隐式网格</code>）扩充<code>行</code>，还是扩充<code>列</code>。（默认 <code>row</code>）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/row-gap" rel="nofollow">row-gap</a></td> 
   <td></td> 
   <td align="left">设置<code>行间距</code>大小。兼容旧版请用<code>grid-row-gap</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-gap" rel="nofollow">column-gap</a></td> 
   <td></td> 
   <td align="left">设置<code>列间距</code>大小。兼容旧版请用<code>grid-column-gap</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap" rel="nofollow">gap</a></td> 
   <td>是</td> 
   <td align="left"><code>row-gap</code> 和 <code>column-gap</code>的简写形式。兼容旧版请用<code>grid-gap</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid" rel="nofollow">grid</a></td> 
   <td>是</td> 
   <td align="left">可以用来设置以下属性：<br>显式网格属性：grid-template-rows、grid-template-columns 和 grid-template-areas<br>隐式网格属性：grid-auto-rows、grid-auto-columns 和 grid-auto-flow<br>间距属性：row-gap（grid-row-gap）和 column-gap（grid-column-gap）。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a rel="nofollow"></a><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-areas" rel="nofollow">grid-template-areas</a></td> 
   <td></td> 
   <td align="left">在网格中定义各<code>区域名称</code>。网格项上的<code>grid-area</code>可以使用。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><font>——————————</font></td> 
   <td></td> 
   <td align="left"></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

## 内容属性 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th>简写形式</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-row-start" rel="nofollow">grid-row-start</a></td> 
   <td></td> 
   <td align="left">指定网格项的<code>行</code> <code>开始</code>位置，可以用：<code>网格线编号</code>（负值从后往前数）、<code>span</code>（跨度）或<code>留空</code>用默认值。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-row-end" rel="nofollow">grid-row-end</a></td> 
   <td></td> 
   <td align="left">指定网格项的<code>行</code> <code>结束</code>位置，可以用：<code>网格线编号</code>（负值从后往前数）、<code>span</code>（跨度）或<code>留空</code>用默认值。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-row" rel="nofollow">grid-row</a></td> 
   <td>是</td> 
   <td align="left"><code>grid-row-start / grid-row-end</code> 的简写形式。斜杠<code>/</code>是分割符</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column-start" rel="nofollow">grid-column-start</a></td> 
   <td></td> 
   <td align="left">同上设置<code>列</code> <code>开始</code>位置</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column-end" rel="nofollow">grid-column-end</a></td> 
   <td></td> 
   <td align="left">同上设置<code>列</code> <code>结束</code>位置</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-column" rel="nofollow">grid-column</a></td> 
   <td>是</td> 
   <td align="left"><code>grid-column-start / grid-column-end</code>的简写形式。斜杠<code>/</code>是分割符</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-area" rel="nofollow">grid-area</a></td> 
   <td>是</td> 
   <td align="left">对于 <code>grid-row-start</code>、<code>grid-column-start</code>、<code>grid-row-end</code> 和 <code>grid-column-end</code> 的简写形式。可以直接使用<code>网格名称</code></td> 
  </tr> 
  <tr> 
   <td align="left"><font>————————</font></td> 
   <td></td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

# 效果展示 #

所有代码可以在线调试：[https://codepen.io/jerryjin/pen/xxVvYgV][https_codepen.io_jerryjin_pen_xxVvYgV]

* {   padding: 0;  margin: 0; }
    /* article 基础样式 */
    article { 
        width: 150px; height: 150px; border: solid 5px silver; margin: 10px; /* 宽、高、边框、外边距 */
        display: inline-grid; /* 开始网格模式 */
        overflow:hidden;
    }
    article:nth-of-type(n+7){ 
        height: auto; /* 覆写高度，允许撑开 */ 
        overflow: visible;  /* 覆写超出为显示 */
    }
    /* 所有 div 基础样式 */
    div { 
      background: lightgreen; /* 背景色 */
      background-clip: content-box; /* 背景色应用到内容区域。还可选：border-box, padding-box */
      padding: 5px; /* 内边距 */
      border: solid 1px #ddd; /* 边框 */
      text-align: center; line-height: 35px; /* 文字水平垂直居中 */
    }
    /* ---------------------------------------------------------------------------- */
    #hrd { 
      width: 400px; height: 500px;
      grid-template: repeat(5, 1fr) / repeat(4, 1fr);
      grid-template-areas: "赵云 曹操 曹操 黄忠"
                           "赵云 曹操 曹操 黄忠"
                           "张飞 关羽 关羽 马超"
                           "张飞 卒1 卒2 马超"
                           "卒3 . . 卒4"
    }
    #hrd>div:nth-of-type(1){   grid-area: 曹操; line-height: 200px;}
    #hrd>div:nth-of-type(2){   grid-area: 关羽; line-height: 100px;}
    #hrd>div:nth-of-type(3){   grid-area: 张飞; line-height: 200px;}
    #hrd>div:nth-of-type(4){   grid-area: 赵云; line-height: 200px;}
    #hrd>div:nth-of-type(5){   grid-area: 马超; line-height: 200px;}
    #hrd>div:nth-of-type(6){   grid-area: 黄忠; line-height: 200px;}
    #hrd>div:nth-of-type(7){   grid-area: 卒1; line-height: 100px;}
    #hrd>div:nth-of-type(8){   grid-area: 卒2; line-height: 100px;}
    #hrd>div:nth-of-type(9){   grid-area: 卒3; line-height: 100px;}
    #hrd>div:nth-of-type(10){   grid-area: 卒4; line-height: 100px;}
    /* ---------------------------------------------------------------------------- */
    #a1 { 
      grid-template-rows: 50px 50px 50px;
      grid-template-columns: 50px 50px 50px;
    }
    #a2 { 
      grid-template-rows: 33% 34% 33%;
      grid-template-columns: 33% 34% 33%;
    }
    #a3 { 
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
    }
    #a4 { 
      grid-template-rows: repeat(3, 1fr);
      grid-template-columns: repeat(3, 1fr);
    }
    #a5 { 
      grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
    }
    #a6 { 
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 5px; /* 同时设置行列边距 */
    }
    #a7 { 
      grid-template-rows: 1fr; /* 定义1行 */
      grid-template-columns: 1fr 1fr; /* 定义2行 */
      
      grid-auto-rows: 80px; /* 设置隐式行轨道 */
      grid-auto-columns: 80px; /* 设置隐式列轨道 */
    }
    #a7>div:nth-of-type(7){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-row: 1 / 3; /* 定位行到网格线 开始1 => 结束3 */
      grid-column: 3 / 4; /* 定位列到网格线 开始3 => 结束4 */
    }
    #a8 { 
      grid-template-rows: [r1s] 1fr [r1e r2s] 1fr [r2e r3s] 1fr [r3e]; /* 显示定义名称 */
      grid-template-columns: repeat(3, [cs] 1fr [ce]); /* 自动定义名称 */
    }
    #a8>div:nth-of-type(5){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-area: r3s / cs 3 / r3s / ce 3; /* 通过名称定位 */ 
    }
    #a8>div:nth-of-type(6){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-area: 4 / cs 3 / 5 ; 
    }
    #a8>div:nth-of-type(7){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-area: 5 / cs 3 ; 
    }
    #a8>div:nth-of-type(8){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-area: 6; 
    }
    #a9 { 
      grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    }
    #a9>div:nth-of-type(1){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-area: span 3 / span 3; 
    }
    #a10 { 
      width: 150px; height: 150px;
      grid-template: repeat(auto-fill, minmax(20px, 1fr) ) / repeat(auto-fill, minmax(20px, 1fr));
    }
    #a10>div{ 
       padding: 0; /* 内边距 */
       line-height: 20px;
    }
    #a10>div:nth-of-type(1){   grid-area: 1 / 1 / 2 / 7; }
    #a10>div:nth-of-type(2){   grid-area: 1 / 7 / 7 / 8; }
    #a10>div:nth-of-type(3){   grid-area: 7 / 2 / 7 / 8; }
    #a10>div:nth-of-type(4){   grid-area: 2 / 1 / 8 / 2; }
    #a10>div:nth-of-type(5){   grid-area: 2 / 2 / 3 / 6; }
    #a10>div:nth-of-type(6){   grid-area: 2 / 6 / 6 / 7; }
    #a10>div:nth-of-type(7){   grid-area: 6 / 3 / 7 / 7; }
    #a10>div:nth-of-type(8){   grid-area: 3 / 2 / 7 / 3; }
    #a10>div:nth-of-type(9){   grid-area: 3 / 3 / 5 / 5; }
    
    #a11 { 
      width: 500px; height: 150px;
      grid-template: repeat(auto-fit, minmax(20px, 1fr) ) / repeat(auto-fit, minmax(20px, 1fr));
    }
    
    #a12 { 
      grid-template: repeat(3, 1fr) / repeat(1, 1fr) ;
      grid-auto-flow: column;
    }
    
    #a13{ 
      grid-template: repeat(1, 1fr) / repeat(3, 1fr) ;
      grid-auto-flow: row;
    }
    
    #a14{ 
      width: 400px; height: 100px;
      grid-template: repeat(1, 30px) / repeat(9, 30px) ;
     
      place-content: space-evenly space-evenly;
    }
    #a14>div{ width:20px; height: 20px; line-height: 20px;}
    
    #a15{ 
      width: 400px; height: 400px;
      grid-template: repeat(3, 1fr) / repeat(3, 1fr);
      place-items: center center;
    }
    #a15>div{ width:40px; height: 40px;}
    #a15>div:nth-of-type(5){  
      place-self: end end;
    }

let ele = document.querySelector("#a1"); // 选择 article 
    
    // 克隆 article 凑齐 15 个
    for(let i = 2; i <= 15; i++){ 
      let temp = ele.cloneNode(true);
      temp.id = "a" + i;
      ele.parentNode.appendChild(temp);
    }

## grid-template-rows、grid-template-columns 基本用法 ##

给所有容器设置默认`行列轨道`大小  
`grid-template-rows、grid-template-columns` 取值规则：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>例子</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>像素 px</td> 
   <td>grid-template-rows: 50px 50px 50px;</td> 
  </tr> 
  <tr> 
   <td>百分比 %</td> 
   <td>grid-template-rows: 33% 34% 33%;</td> 
  </tr> 
  <tr> 
   <td>n等分 <font>n</font>fr</td> 
   <td>grid-template-rows: 1fr 1fr 1fr;</td> 
  </tr> 
  <tr> 
   <td>重复 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat" rel="nofollow">repeat</a></td> 
   <td>grid-template-rows: repeat(2, 50%); // 等同于上一行效果<br></td> 
  </tr> 
  <tr> 
   <td>minmax(min, max)</td> 
   <td>minmax(10px, 2fr) // 最小时10px，最大时2fr</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]  
前四个，分别使用四种单位设置。其他默认`行列轨道`大小  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]

## grid-template 简写 ##

同时设置：`grid-template-rows、grid-template-columns` 实现和前面相同的`行列轨道`效果。

#a5 { 
      grid-template: 1fr 1fr 1fr/ 1fr 1fr 1fr;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 1]

## gap(grid-gap) 简写 ##

设置`行、列`边距  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 2]

## grid-auto-rows、grid-auto-columns 设置隐式行列轨道 ##

*  只显式的定义了 `1行2列`，超出的部分都是`隐式网格`。
 *  grid-row、grid-column 通过简写的方式定义了`第7个div`。（列的开始网格线为`3`,超出了显示定义的`列`所以系统自动创建了隐式网格）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 3]

## grid-area 网格内容定位简写 + 定义线名称 ##

grid-area: 行-start;
    grid-area: 行-start / 列-start
    grid-area: 行-start / 列-start / 行-end;
    grid-area: 行-start / 列-start / 行-end / 列-end;

**自定义网格线名称和使用**：

*  显示定义名称：在轨道的左右用`[]`写上网格线`名称`即可
 *  自动定义名称：`repeat(3, [开始标识] 1fr [结束标识])`。使用： `开始标识 + 空格 + 行或列号`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 4]

## span 跨度（使用偏移量定位） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 5]  
注意： 这里行的单位使用了像素`50px`。经过测试如果使用`1fr`，span `跨越行数`必须`小于` `定义行数`。否则跨度失效，只会占用一行。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 6]  
将定义行数设置到合理。比如：(显示设置 `4` 行)可以解决。

#a9 { 
      grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    }
    #a9>div:nth-of-type(1){ 
      background: red; /* 背景色红 */
      background-clip: content-box; /* 背景色应用于内容区域 */
      grid-area: span 3 / span 3; 
    }

## auto-fit 、auto-fill 自动分配行列数 ##

`网格项`大小`固定`，系统在容器中自动判断应该分配多少`行/列`。  
[auto-fit][]：网格项不足以填满一行时。各项`平分`剩余空间  
[auto-fill][auto-fit]：网格项不足以填满一行时。`保留`剩余空间

虽然可以直接写固定值，但范围值 `minmax(20px, 1fr)` 更适用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 7]  
![在这里插入图片描述][20201006162613373.png_pic_center]

## grid-template-areas 网格区域 ##

符号点`.`用于跳过单元格  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 8]

## grid-auto-flow 控制隐式网格的扩充方向 ##

*  row：扩充 行
 *  column：扩充列
 *  dense：有小元素时候，是否填补到之前的空白中去？（会导致顺序乱掉）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 9]

# 对齐控制 #

[**对齐**][Link 1]属相相对独立并不是网格系统的专属，所以分开演示

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>属性</th> 
   <th>对象</th> 
   <th>简写</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td><a href="https://blog.csdn.net/jx520/article/details/108394051#t7" rel="nofollow">align-content</a></td> 
   <td>容器</td> 
   <td></td> 
   <td align="left">控制如何沿着<code>弹性盒子布局的纵轴</code>和<code>网格布局的主轴</code>在内容项之间和周围分配空间</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td><a href="https://blog.csdn.net/jx520/article/details/108394051#t5" rel="nofollow">justify-content</a></td> 
   <td>容器</td> 
   <td></td> 
   <td align="left">控制如何分配顺着<code>弹性容器主轴</code>(或<code>网格行轴</code>) 的元素之间及其周围的空间。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-content" rel="nofollow">place-content</a></td> 
   <td>容器</td> 
   <td>是</td> 
   <td align="left">语法 <code>&lt;'align-content'&gt; &lt;'justify-content'&gt;?</code></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td><a href="https://blog.csdn.net/jx520/article/details/108394051#t" rel="nofollow">align-items</a></td> 
   <td>容器</td> 
   <td></td> 
   <td align="left">控制元素在<code>垂直</code>方向的对齐方式。（开头、末尾、拉伸）</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-items" rel="nofollow">justify-items</a></td> 
   <td>容器</td> 
   <td></td> 
   <td align="left">控制元素在<code>水平</code>方向的对齐方式。（开头、末尾、拉伸）</td> 
  </tr> 
  <tr> 
   <td>6</td> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-items" rel="nofollow">place-items</a></td> 
   <td>容器</td> 
   <td>是</td> 
   <td align="left">语法 <code>&lt;'align-items'&gt; &lt;'justify-items'&gt;?</code></td> 
  </tr> 
  <tr> 
   <td>7</td> 
   <td><a href="https://blog.csdn.net/jx520/article/details/108394051#t10" rel="nofollow">align-self</a></td> 
   <td>元素</td> 
   <td></td> 
   <td align="left">控制<code>当前</code>元素在<code>垂直</code>方向的对齐方式。（开头、末尾、拉伸）</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-self" rel="nofollow">justify-self</a></td> 
   <td>元素</td> 
   <td></td> 
   <td align="left">控制<code>当前</code>元素在<code>水平</code>方向的对齐方式。（开头、末尾、拉伸）</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-self" rel="nofollow">place-self</a></td> 
   <td>元素</td> 
   <td>是</td> 
   <td align="left">语法 <code>&lt;'align-self'&gt; &lt;'justify-self'&gt;?</code></td> 
  </tr> 
  <tr> 
   <td><font>&lt;/font</font></td> 
   <td><font>———————</font></td> 
   <td><font>——</font></td> 
   <td><font>——</font></td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

注意：对齐效果，要在有多余空间，时才看的出效果。不然元素填满了网格，怎么排看上去效果都一样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 10]

# 参考资料 #

[MDN 网格布局][MDN]  
[后盾人：栅格系统][Link 2]  
[阮一峰的网络日志》CSS Grid 网格布局教程][CSS Grid]

[https_codepen.io_jerryjin_pen_xxVvYgV]: https://codepen.io/jerryjin/pen/xxVvYgV
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: /images/20221123/6d5cef74972f44129cdd89c6438911b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/1550d7cd44394d3284cfe93b7c5963c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/9750d67407084f5a862f6d61ded2b597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/2e545fc8c58a4feca41634a6c1c47107.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/78cb82deea8b420e9b42e58d3a99b2f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/95dbbbf1a87c42b2b37ca7a298e95f76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/fa7c38fa20f24252ba478fef7a91f4ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/048e669d33474e4b8ee855405b98b202.png
[auto-fit]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/1b66922c27774ee089872d5a33f6cfc3.png
[20201006162613373.png_pic_center]: /images/20221123/050b1f3fa62c45da9ab07021537d3c37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/70b74e5682844702977419249290a469.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/936e6334de8d4b2098017748be964e93.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/c68a49545dc24f079ebe5a788fa48f31.png
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout
[Link 2]: https://houdunren.gitee.io/note/css/11%20%E6%A0%85%E6%A0%BC%E7%B3%BB%E7%BB%9F.html
[CSS Grid]: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html