CSS 具有等宽部分列和部分 borders/margins 的网格布局

Question

我希望有一个重复部分的网格布局（3 列）。我希望这些部分具有边框和边距，并在所有部分中具有相等宽度的列。我已经完成了大部分的工作，但是我在使用 display: contents; 的 no border/margin 之间挣扎。或宽度不等。我要的是 css 子网格吗？（支持不佳），还有其他方法还是我可以将 border/margin 应用于儿童？

.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

margin 可以替换为 gap 和 border，元素上有单独的边框：

.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.

CSS 具有等宽部分列和部分 borders/margins 的网格布局

CSS Grid layout with equal width sections columns and sections with borders/margins

html

css

subgrid

css-grid