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

Question

我想利用 css grid 使用repeat(x) 模式显示下表：

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

绿色+黄色框应该可以重复X次。

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

Answer 1

蓝色框是标题，只出现一次。他们应该使用 自动宽度，基于列中最大的蓝/绿框。

根据您的 CSS 在父元素宽度和高度方面设置的内容，每行中的子元素将由您在 CSS 中设置的网格模板列/行分数确定。 grid-template-rowsgrid-template-columns。如果您有三列，每列 1fr 宽，它们将跨越 CSS 中为该行设置的宽度和间隙 => grid-template-areas: "el el el" 等于 el + gap + el + gap + el em> = 父级在 CSS 中声明的宽度。

黄色框占 100% 宽度，结合所有 3 个宽度 列。

如果您的行仅包含一个元素，即黄色行，您希望将它们布置在网格模板区域中，例如 grid-template-areas: "row3 row3 row3" 元素类 = row3.

“绿色+黄色的方框应该可以重复X次。”

使用 网格布局，您必须编写 CSS 代码以适应这种情况。

• 您的 HTML 必须为该行中的每个新行/元素反映一个类选择器。
• 必须将新行的类选择器添加到父元素（ma​​in 在我下面的示例中）CSS grid-template-areas: 并且 grid-template-rows: repeat(8, 1fr); 规则必须在此处反映正确的重复行数 => repeat(8, 1fr)，8 是布局中的行数。
• 该行中的每个新行/元素都需要为其类选择器设置一个grid-area。

:root {
  --orange: 242, 202, 4;
  --green: 85, 205, 75;
  --blue: 80, 137, 245;
}

#cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 20px 20px;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  grid-template-areas: 
    "col1-row1 col2-row1 col3-row1" 
    "col1-row2 col2-row2 col3-row2" 
    "row3 row3 row3" 
    "col1-row4 col2-row4 col3-row4" 
    "row5 row5 row5" 
    "col1-row6 col2-row6 col3-row6" 
    "row7 row7 row7" 
    ". bullets .";
}

.col1-row1 {
  grid-area: col1-row1;
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.col2-row1 {
  grid-area: col2-row1;
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.col3-row1 {
  grid-area: col3-row1;
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.col1-row2 {
  grid-area: col1-row2;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col2-row2 {
  grid-area: col2-row2;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col3-row2 {
  grid-area: col3-row2;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.row3 {
  grid-area: row3;
  border: 2px solid rgb(var(--orange));
  background: rgba(var(--orange), 0.5);
}

.col1-row4 {
  grid-area: col1-row4;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col2-row4 {
  grid-area: col2-row4;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col3-row4 {
  grid-area: col3-row4;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.row5 {
  grid-area: row5;
  border: 2px solid rgb(var(--orange));
  background: rgba(var(--orange), 0.5);
}

.col1-row6 {
  grid-area: col1-row6;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col2-row6 {
  grid-area: col2-row6;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col3-row6 {
  grid-area: col3-row6;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.row7 {
  grid-area: row7;
  border: 2px solid rgb(var(--orange));
  background: rgba(var(--orange), 0.5);
}

.bullets {
  grid-area: bullets;
  display: flex;
  justify-content: space-around;
  align-items: end;
}
.bullets span {
  height: 10px;
  width: 10px;
  border: 2px solid #AAA;
  background: #CCC;
  border-radius: 20px;
}

<div id="cont">
  <div class="main">
    <div class="col1-row1"></div>
    <div class="col2-row1"></div>
    <div class="col3-row1"></div>
    <div class="col1-row2"></div>
    <div class="col2-row2"></div>
    <div class="col3-row2"></div>
    <div class="row3"></div>
    <div class="col1-row4"></div>
    <div class="col2-row4"></div>
    <div class="col3-row4"></div>
    <div class="row5"></div>
    <div class="col1-row6"></div>
    <div class="col2-row6"></div>
    <div class="col3-row6"></div>
    <div class="row7"></div>
    <div class="bullets">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

Answer 2

其实你的布局只需要一个规则就可以实现：

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

Answer 3

我扩展了@dalelandry 答案以使其更具动态性，而无需在grid-template-areas 中明确定义每一行并改用grid-column: span 3;。

:root {
  --yellow: 242, 202, 4;
  --green: 85, 205, 75;
  --blue: 80, 137, 245;
}

#cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: grid;
  grid-template-columns: auto, auto, auto;
  gap: 10px 10px;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
}
.box {
   height:50px;
}
.yellow-box {
  grid-column: span 3;
  border: 2px solid rgb(var(--yellow));
  background: rgba(var(--yellow), 0.5);
 }
.blue-box {
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.green-box {
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

<div id="cont">
  <div class="main">
    <div class="blue-box"></div>
    <div class="blue-box"></div>
    <div class="blue-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="yellow-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="yellow-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="yellow-box"></div>
    </div>
  </div>
</div>