当前位置：首页 > article >正文

CSS - grid制作表格

article 2024/12/25 14:14:12

1. grid-template-columns：网格布局中的列的数量，也可以设置列的宽度
.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;//表示所有列的宽度第一样
} 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  //一个 fr 单位代表网格容器中可用空间的一等份
  //这里创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩
}
2. grid-template-rows：每一行的高度
.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}
3. justify-content：用于对齐容器内的网格（和display:flex里面的属性一样）

4. align-content：用于设置垂直方向上的网格元素在容器中的对齐方式（和display:flex里面的属性一样）

5. grid-column-gap:列之间的网格间距

6. grid-row-gap:行之间的网格间距

7. grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写

8. grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 属性可以设置网格线
//从第一列开始，第三列结束
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
//从第一行开始，第三行结束
.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

9. grid-column : 定义了网格元素列的开始和结束位置(是 grid-column-start 和 grid-column-end 属性的简写属性)
//设置 "item1" 在第 1 列开始，在第 5 列前结束
.item1 {
  grid-column: 1 / 5;
}

//设置 "item1" 跨越 3 列
.item1 {
  grid-column: 1 / span 3;
}

//设置 "item2" 跨越 3 列
.item2 {
  grid-column: 2 / span 3;
}
10. grid-row : 定义了网格元素行的开始和结束位置

11. grid-area: 是 grid-row-start, grid-column-start, grid-row-end 以及 grid-column-end 属性的简写
//设置 "item8" 从第 1 行开始和第 2 列开始， 第 5 行和第 6 列结束
.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

//设置 "item8" 从第 2 行开始和第 1 列开始， 横跨 2 行 3 列
.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}