CSS 网格布局具有等宽的节列和具有边框/边距的部分

Question

我希望有一个重复部分的网格布局(3 列(。我希望这些部分具有边框和边距，并且所有部分的列宽度相等。我已经完成了大部分工作，但正在使用显示：内容在没有边框/边距之间挣扎;或不等宽。我要求的是什么 css 子网格？(支持不足(，有没有其他方法或我是否可以对孩子应用边框/边距？

.grid {
display: grid;
grid-template-columns: auto auto 1fr;
padding: 10px;
border: 2px solid red;
}
.sectionWrap {
display: contents;
border: 3px solid purple;
margin: 6px;
}
.c1,
.c2,
.c3 {
border: 1px solid blue;
}

<div class="grid">
<div class="sectionWrap">
<div class="c1">
shorter text
</div>
<div class="c2">
2
</div>
<div class="c3">
3
</div>
</div>
<div class="sectionWrap">
<div class="c1">
longer text...............
</div>
<div class="c2">
2
</div>
<div class="c3">
3
</div>
</div>
</div>
<span> unfortunately missing my border and margin using display: contents.

Answer 1

边距可以替换为间距和边框，元素上有单独的边框：

.grid {
display: grid;
grid-template-columns: auto auto 1fr;
row-gap:12px;
padding: 12px;
border: 2px solid red;
}
.sectionWrap {
display: contents;
}
.c1 {
border:3px solid purple;
border-right:1px solid blue;
}
.c2 {
border:3px solid purple;
border-right:1px solid blue;
border-left:1px solid blue;
}
.c3 {
border:3px solid purple;
border-left:1px solid blue;
}

<div class="grid">
<div class="sectionWrap">
<div class="c1">
shorter text
</div>
<div class="c2">
2
</div>
<div class="c3">
3
</div>
</div>
<div class="sectionWrap">
<div class="c1">
longer text...............
</div>
<div class="c2">
2
</div>
<div class="c3">
3
</div>
</div>
</div>
<span>

Answer 2

您可以通过将grid-template-columns: auto auto 1fr;更改为grid-template-columns: 1fr 1fr 1fr;来保持所有列的宽度相同 这就是您的代码在此更改后的外观，我还删除了display: contents;

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
padding: 10px;
border: 2px solid red;
}
.sectionWrap {
border: 3px solid purple;
margin: 6px;
}
.c1,
.c2,
.c3 {
border: 1px solid blue;
}

<div class="grid">
<div class="sectionWrap">
<div class="c1">
shorter text
</div>
<div class="c2">
2
</div>
<div class="c3">
3
</div>
</div>
<div class="sectionWrap">
<div class="c1">
longer text...............
</div>
<div class="c2">
2
</div>
<div class="c3">
3
</div>
</div>
</div>
<span> unfortunately missing my border and margin using display: contents.