主页 / 问题 / 1380972
Accepted
rabbit
Asked:2022-07-11 19:39:10 +0000 UTC2022-07-11 19:39:10 +0000 UTC

使用 nth-child 构建网格框

  • 772

我有一个无法正常工作的网格 html 代码。我需要这个结果：

在此处输入图像描述

但最后，代码并没有给出想要的结果。请告诉我哪里错了。谢谢你。

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow:dense;
  gap: 30px;
}

.item {
  background: grey;
}

.item:nth-child(6n + 1), .item:nth-child(6n + 6) {
  grid-row:span 2;
  grid-column:span 2;
}

.item:nth-child(6n + 5) {
  grid-column:1;
}

.item:nth-child(4n) {
  grid-column: span 2;
}
<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

html

1 个回答

  1. Best Answer

    稍微更正了您的解决方案

    .grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
/*   grid-auto-flow:dense; */
  gap: 30px;
}

.item {
  background: grey;
}

.item:nth-child(8n+1) {
  grid-row: span 2;
}

.item:nth-child(8n+6) {
  grid-row: span 2;
}

.item:nth-child(4n) {
  grid-column: span 2;
}
    <div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
</div>

    • 2

相关问题