4 合并grid列_css布局的Grid布局方法

CSS Grid(网格)布局，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局(类似我们的excel)。（下面会写很多代码）

首先，你必须使用display：grid/inline-grid将容器元素定义为一个 grid(网格) 布局，然后用gird-template-columns和gird-template-rows设置列和行的尺寸，也可以用grid-template-areas（上面两个代码的简写）来设置列和行。然后通过grid-row-start、grid-row-end（上面两个简写grid-row：x/y）和grid-column-start、grid-column-end(上面两个简写grid-column：x/y)将其子元素放入这个 grid(网格) 中。

grid-row：x/y grid-column：x/y

grid-template-columns和grid-template-rows 属性

可以写具体的像素

.container {
  display: grid;
  grid-template-columns: 10px 10px 10px;
  grid-template-rows: 10px 10px 10px;
}

可以写成百分比

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

可以写成fr，代表几份，均分占几份

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr ;
}

可以使用 repeat（）函数，简化重复的值

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

上面的代码都是一个结果（如图）