说明

css可以实现像 table 标签那样的 网格布局

实现

HTML代码

是普通的 div 布局

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

display 属性

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，就变成 网格容器，这个元素的所有直接子元素成为网格元素（即：单元格）

.grid-container {
  display: grid;
}

或

.grid-container {
  display: inline-grid;
}

grid-template-columns 属性

通过 grid-template-columns 属性设置 网格的 列的数量

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ; /*2列，且两列宽度相同*/
}

fr 单位

网格使用 fr 单位定义网格。一个 fr 单位代表网格容器中可用空间的 一等份。

下面代码定义2列，第2列宽度是第1列宽度的2倍：

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

background-color 属性

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格背景色*/
}

设置单元格样式

通过设置 div 的样式，达到设置单元格的效果

如：背景色、文字水平居中，行高

注意：此时 网格背景色不显示，因为被单元格盖住了

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格背景色*/
}


.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}

padding 属性

设置网格内边距，实现网格外边框效果

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
}

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}

grid-gap 属性

设置 单元格间距，实现网格 内边距 效果

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
}

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}

完整样式

<style>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
}

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}
</style>

网格线

列与列，行与行之间的交接处就是网格线。

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素

跨列

通过 grid-column-start 和 grid-column-end 属性设置

关键代码

.cell_1{
  grid-column-start: 1;
  grid-column-end: 3;
}

完整代码

<style>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  background-color: red; /*设置网格颜色*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
}

.grid-container > div {
  background-color: green; /*实现单元格颜色*/
  text-align: center; /*文字水平居中*/
  padding:10px 0;/*通过设置div的上下内边距，实现设置行高的效果*/
}

.cell_1{
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>

<div class="grid-container">
  <div class='cell_1'>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div class='cell_1'>6</div>
</div>

其他属性

grid-template-rows 属性

设置行高

提示：使用较少

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 50px 70px 90px;
  background-color: #2196F3; /*设置网格颜色*/
  grid-gap: 1px; /*单元格间距，实现网格内部边框效果*/
  padding: 2px;/*网格内边距，实现网格边框效果*/
}

属性列表

下面属性详见：
https://www.runoob.com/css3/css-grid.html

参考：
https://www.runoob.com/css3/css-grid.html

原文出处：/show_1IX7TgspULjo.html