css3 网格布局的网格线名称& grid-template-areas

Administrator 字数: 3819 阅读耗时: 9 分钟 2022/05/07 博客独享热度: 140 评论: 0

（1）网格线名称 (方括号里面依次是这八根线的名字)
4根垂直网格线 4根水平网格线
n行或列就有n+1条网格线

grid-template-columns: [col-1-start num1 x1] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

代码演示：

（2）grid-template-areas属性用于定义区域。

 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。

可以对网格进行命名

<div class="container">
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
  <div class="col">你好</div>
</div>

css

* {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 区域 grid-template-areas属性用于定义区域。 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。 */
  grid-template-areas: 'a b c''d e f''g h i';
  margin-bottom: 20px;
}

.col {
  border: 2px solid red;
}

代码演示：

如果某些区域不需要利用，则使用"点"（.）表示

grid-template-areas: 'a . c' 'd . f' 'g . i';