如何平均间隔CSS网格列？

Question

我有一个以表格格式显示数据的网格。 我公司以前的开发人员使用grid-template-columns和minmax属性来实现视图，但是其中一个表的第一列很宽，其他所有列都可以。 我如何均匀地隔开它们，使它们具有相同的宽度？

我试过使用minmax（auto，1fr）和repeat（auto-fill，minmax（max-content，1fr））重复，但它只是弄乱了视图的整个结构

主容器具有以下CSS：

    display: grid;
    grid-template-columns: minmax(min-content, 30%) 1fr auto;
    justify-content: center;

显示表数据的页面的prt是这样的：

    display: grid;
    grid-template-columns: minmax(auto, 1fr);

我希望每列的间距相等

看图片

Answer 1

这是使用网格的3个相等列的示例：

 .parent { background: blue; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); height: 100%; width: 100%; } .child-1 { background: red; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3 end; } .child-2 { background: green; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3 end; } .child-3 { background: black; grid-column-start: 3; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3 end; } @-- Non-Grid Styles --@ body { height: 100vh; margin: 0; width: 100vw; } .child-1, .child-2, .child-3 { align-items: center; color: white; display: flex; justify-content: center; } 

 <div class="parent"> <div class="child-1">child 1</div> <div class="child-2">child 2</div> <div class="child-3">child 3</div> </div> 

此链接对如何使用网格有很好的解释： 网格信息