html - 如何使用 css 网格重复不同宽度的不同类型的行？

Question

我想利用 css 网格使用 repeat(x) 模式显示下表:

• 蓝色框是标题，仅出现一次。他们应该根据列中最大的蓝色/绿色框使用自动宽度。
• 绿色框还使用基于列中最大的蓝色/绿色框的自动宽度。
• 这些黄色框的宽度为所有 3 列宽度的 100%。

绿色 + 黄色框应该能够重复 X 次。

如果这不是使用网格的好示例，请随意展示不同的替代方案!

Answer 1

实际上您的布局只需使用一条规则即可实现:

.container {
  display:grid;
  grid-gap:10px;
  grid-auto-rows:50px;
}

.container div {
  background:green;
}

/* the first 3 row (the heading) */
.container :nth-child(-n + 3) {
  background:purple;
}
/* the largest row */
.container :nth-child(4n + 7) { /* you pattern repeat each 4 items starting from the 7th */
  background:orange;
  grid-column:span 3; /* this rule will do everything */
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>