如何使用网格布局使元素停留在第 n 个单元格上？

Question

我有一个响应式网格布局，列和行是由窗口大小动态计算的。

现在我希望 .target 位于特定单元格上，而不考虑网格列，假设是第 7 个单元格，因此如果网格有 5 列，.target 应该位于第 2 行和第 2 列。这个可以吗？

我知道我可以使用grid-row 和grid-column 来分配元素的位置。但是网格的行和列是动态的，所以我不知道哪一行和哪一列是第 7 个单元格。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

/* this need to be on the 7th cell */
.target {
  background-color: red;
}

<div class="grid">
  <span class="target"></span>
</div>

我可以创建很多空元素来将.target 推送到第 7 个单元格，但是我不允许触摸 html 结构，所以我不能这样做：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

.target {
  background-color: red;
}

<div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="target"></span>
</div>

Answer 1

进一步澄清确定网格中始终只有一个单元格，并将其定位为第 7 个单元格。

如果网格覆盖了视口的宽度，这可以通过纯 CSS 完成。在这种特殊情况下，媒体查询确定目标单元格位于哪一行和哪一列。

          .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

.target {
  /* there will be at least 7 cells per row */
  grid-column: 7;
  grid-row: 1;
  background-color: red;
}

@media (max-width: 699px) {
  /* 6 cells in the first row ^/
  .target {
  grid-column: 1;
  grid-row: 2;
  }
  @media (max-width: 599px) { /* 5 cells per row */
  .target {
    grid-column: 2;
    grid-row: 2;
  }
  @media (max-width: 499px) {
    /* 4 cells per row */
    .target {
      grid-column: 3;
      grid-row: 2;
    }
    @media (max-width: 399px) {
      /* 3 cells per row */
      .target {
        grid-column: 1;
        grid-row: 3;
      }
      @media (max-width: 299px) {
        /* 2 cells per row */
        .target {
          grid-column: 1;
          grid-row: 4;
        }
        @media (max-width: 199px) {
          /* 1 cell per row */
          .target {
            grid-column: 1;
            grid-row: 7;
          }

<div class="grid">
  <span class="target">target cell</span>
</div>

原始答案：假设网格中有孩子的“正常”情况。

如果网格中的孩子少于 7 个，则不会有第 7 个单元格。

但是，如果网格中有 7 个或更多直接子代，那么您应该能够将第 7 个作为子代使用

.grid :nth-child(7) {background-color: red;}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

.grid span {
  background-color: #eeeeee;
}

.grid :nth-child(7) {
  background-color: red;
}

<div class="grid">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

我可能误解了 - 如果单元格少于 7 个应该怎么办？