css3 网格容器grid grid-template-rows&column

Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。
Grid布局远比 Flex 布局强大。
Grid的构成:网格容器＋项目
采用网格布局的区域，称为"容器"(container)。容器内部采用网格定位的子元素，称为"项目"
特点：如果没有为盒子设定宽高，那项目的大小会随着网页大小的改变而改变

• grid-template-columns属性定义每一列的列宽
• grid-template-rows属性定义每一行的行高

以上属性可以用repeat，像素，百分比：

• grid-template-columns：repeat(12,1fr);
• grid-template-columns：100px 100px 100px;
• grid-template-columns：20% 30% 50%;

<div class="container">
  <!-- .column*12{你好} -->
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
  <div class="column">你好</div>
</div>

css:

（1） grid-template-columns: repeat(12,1fr);

grid-template-columns:属性定义每一份的列宽，12列，占据空间均等）

* {
  margin: 0;
  padding: 0;
}

.container {
  margin: 20px;
  /* 将普通盒模型转化为网格容器 */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.column {
  border: 1px solid red;
  text-align: center;
  background-color: skyblue;
  padding: 20px;
}

代码演示：

（2）grid-template-columns: repeat(4,1fr);

代码演示：

（3）在设定好列数（column）的基础上对行数（rows）进行设定，并设定container的宽高

grid-template-rows:repeat(3,1fr);

.container {
  width: 600px;
  height: 600px;
  outline: 1px dashed skyblue;
  margin: 0 auto;
  /* ===grid-template-columns:100px 100px 100px; */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

代码演示：

grid-template-rows: 20% 30% 50%;
代码演示：

grid-template-rows: 100px 200px 300px;代码演示：

grid-template-rows: repeat(3,100px);如果（3,100px）只设立一个元素，则代表100px运用到每个元素身上

也可以单独指定元素：grid-template-rows: repeat(3,100px 200px 300px);

grid-template-rows: repeat(3,20%);