CSS 网格重复模式

Question

我的代码如下所示。它有效，但非常重复。有谁知道如何使这个更清洁？我认为我们应该使用重复或第 n 个孩子？

我对 html 和 css 有点陌生，请原谅我的代码不好。谢谢！

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, auto);
  grid-gap: 10px;
  padding: 10px;
}
.item1 {
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 2;
  grid-column-end: 8;
}

.item2 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 4;
}
.item3 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 4;
  grid-column-end: 6;
}
.item4 {
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 6;
  grid-column-end: 8;
}
.item5 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}
.item6 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 4;
  grid-column-end: 6;
}
.item7 {
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 6;
  grid-column-end: 8;
}

等等……

Answer 1

1. 先拆分常用样式和个别样式。然后使用类 通用和个人 ID。

ID 和类之间的区别在于，ID 可用于标识一个元素，而类可用于标识多个元素。在 CSS 中，类选择器是一个以句点 (“.”) 开头的名称，而 ID 选择器是一个以井号 (“#”) 开头的名称。

1. 如果您有重复的模式，请使用 repeat()

https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

1. 如果您有特定的逻辑或公式，可以使用 nth-child(n)，其中 n 可以是数字、关键字或公式

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 2

虽然您可以使用 nth-child 进行管理，但使用类是一种更简洁的方式。

您至少需要一个 十二 列网格，因为您的元素跨越 1/3、1/2 和所有列。

您不能将 8 列网格分成三等份。

所以，只需应用类来指定每个 div 应该跨越多少列，如下所示：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  text-align: center;
  gap: .25em;
  margin: 1em;
}

.item {
  border: 1px solid grey;
}

.span-12 {
  grid-column: span 12;
}

.span-6 {
  grid-column: span 6;
}

.span-4 {
  grid-column: span 4;
}

<div class="container">
  <div class="item span-12">Item 1</div>
  <div class="item span-4">Item 2</div>
  <div class="item span-4">Item 3</div>
  <div class="item span-4">Item 4</div>
  <div class="item span-4">Item 5</div>
  <div class="item span-4">Item 6</div>
  <div class="item span-4">Item 7</div>
  <div class="item span-6">Item 8</div>
  <div class="item span-6">Item 9</div>
  <div class="item span-12">Item 10</div>
</div>

Answer 3

您可以尝试以下方法：

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

.grid-container>div {
  grid-column: span 2;
  border: 1px solid;
  height: 20px;
}

.grid-container>div:nth-child(9n + 1) {
  grid-column: span 6;
}

.grid-container>div:nth-child(9n - 1),
.grid-container>div:nth-child(9n) {
  grid-column: span 3;
}

<div class="grid-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>