使网格模板列动态化

Question

我有一个表，其某些列的创建取决于数据。我想将这些固定大小的列放在两个特定列之间。

我的实现方式如下：

.grid {
  width: 290px;
  overflow-x: auto;

  display: grid;
  grid-template-columns: [index] 80px repeat(auto-fit, minmax(161px, auto)) [price] 210px
}

.col {
  grid-row: 1;
}

.col.index {
  grid-area: index;
  grid-row: 1;
}

.col.price {
  grid-area: price;
  grid-row: 1;
}

<div class='grid'>
 <div class='col index'>No</div>
 <div class='col'>Color</div>
 <div class='col'>Size</div>
 <div class='col price'>Price</div>
 <div>1</div>
 <div>Red</div>
 <div>Large</div>
 <div>1,000</div>
</div>

第一个动态列

Color

是161px宽度，这是我想要的，但第二个动态列

Size

不是我想要的161px宽度。

可以通过静态css来制作吗？或者我应该使用内联样式？

Answer 1

在网格项目级别而不是容器级别指定此项

.grid {
  width: 290px;
  overflow-x: auto;

  display: grid;
}
.grid :not(.col) {
  grid-row: 2;
}
.col {
  width: 161px;
  border: 1px solid red;
}
.col.index {
  width: 80px;
  border: 1px solid blue;
}
.col.price {
  width: 210px;
  border: 1px solid green;
}

<div class='grid'>
 <div class='col index'>No</div>
 <div class='col'>Color</div>
 <div class='col'>Size</div>
 <div class='col price'>Price</div>
 <div>1</div>
 <div>Red</div>
 <div>Large</div>
 <div>1,000</div>
</div>