Vue

Css Gap 格線容器

  • display:grid
  • grid-template-columns: repeat(行的數量, minmax(0, 1fr))，fr 代表格線容器內，可用空間的分塊（fraction），repeat：：重複標記是軌道表列一部分。
  • gap:間距
1
2
3
4
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
// grid-template-columns: 200px 200px 200px;
gap: 1.25rem;
  • display:grid
  • grid-template-columns: repeat(行的數量, minmax(0, 1fr))，fr 代表格線容器內，可用空間的分塊（fraction），repeat：：重複標記是軌道表列一部分。
  • grid-column-gap指定網格欄之間的間距。
  • grid-row-gapp指定網格列之間的間距。
1
2
3
4
5
6
7
8
9
10
11
12
.two-wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
 // grid-auto-rows: minmax(50px, auto);
  grid-column-gap: 10px; //指定網格欄之間的間距。
   grid-row-gap: 1em; //指定網格列之間的間距。
  margin-top:30px;
    div{
    border:1px solid green;
    display: flex;
    }
  }