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;
}

代码演示:

202103121615517993409600

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

代码演示:

202103121615518120416350

(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);
}

代码演示:

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

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

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

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