CSS中的响应式棋盘格网格？

Question

CSS中的响应式棋盘格网格？

6

这段代码包含一个响应式网格。随着屏幕宽度的变化，列数会自动变化。有时候有偶数列，有时候有奇数列。当列数为奇数时，单元格会像棋盘一样交替变换颜色，但当列数为偶数时，它们不会。是否有办法实现即使是偶数列也能够呈现棋盘效果？需要使用Javascript吗，还是可以仅使用CSS完成？

body {
  margin: 0;
}
.checkers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); 
  padding: 1em;
  gap: 1em;
}
.checkers>div {
  background-color: red;
  aspect-ratio: 1/1;
}
.checkers>div:nth-child(even) {
  background-color: blue;
}

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

- Brett Donald

有点棘手。我认为最简单的CSS解决方案是使用媒体查询始终保持奇数列布局。否则，需要使用JS。 - Michael Benjamin

直到某一天支持::nth-row，目前还没有很好的CSS解决方案。 - mfluehr

2个回答

-1

据我所知，对于偶数列，这是不可能完成的。您可以确保始终有奇数列。您需要明确设置grid-template-columns的奇数列，可以通过媒体查询进行调整。

在此片段中，我借用了Bootstrap的断点作为起点。我最初将网格设置为至少3列（grid-template-columns: repeat(3, 1fr);），然后在每个断点上递增2（下一个奇数）直到13列。

body {
  margin: 0;
}

.checkers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1em;
  gap: 1em;
  overflow: hidden;
}

.checkers>div {
  background-color: red;
  aspect-ratio: 1/1;
}

.checkers>div:nth-child(even) {
  background-color: blue;
}

@media (min-width: 576px) {
  .checkers {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (min-width: 768px) {
  .checkers {
    grid-template-columns: repeat(7, 1fr);
  }
}

@media (min-width: 992px) {
  .checkers {
    grid-template-columns: repeat(9, 1fr);
  }
}

@media (min-width: 1200px) {
  .checkers {
    grid-template-columns: repeat(11, 1fr);
  }
}

@media (min-width: 1400px) {
  .checkers {
    grid-template-columns: repeat(13, 1fr);
  }
}

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

您可以将断点大小调整为网格方格大小的倍数，以使其符合您的喜好。

- Arleigh Hix

这绝对是一个值得考虑的解决方法，不过如果我要使用它，我会放弃minmax表达式。grid-template-columns: repeat(5, 1fr); - Brett Donald

@BrettDonald 完成了，是的，好多了。我对你使用的所有CSS并不是很熟悉，只是找到了需要更改的关键部分，而没有过多地修改你原本的内容。 - Arleigh Hix

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

如果您可以省略使用1fr并考虑使用固定宽度元素，那么您可以使用一些背景技巧来实现：

.checkers {
  display: grid;
  grid-template-columns: repeat(auto-fit, 8em);
  padding: 1em;
  gap: 1em;
  position: relative; /* Relative on the main container */
  z-index:0;
}

.checkers > div {  
  aspect-ratio: 1;
  clip-path: inset(0); /* clip the pseudo element to element*/
}
.checkers > div:before {
  content:"";
  position: absolute;
  z-index:-1;
  inset: 1em; /* same as padding */
  /* create a checkboard pattern using gradient
     18em = (8em + 1em[gap])*2
  */
  background: repeating-conic-gradient(red 0 25%,blue 0 50%) 0 0/18em 18em;
}

body {
 margin: 0;
 background: pink;
 counter-reset: num;
}
.checkers div:after {
 content: counter(num);
 counter-increment: num;
 color:#fff;
 font-weight:900;
 font-size: 25px;
}

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