CSS强制每行奇数个元素

Question

我有一堆内联块元素。奇数和偶数元素的样式不同，因此我希望它们仅在每行奇数个元素后才换行，以在调整屏幕大小时保留网格图案。如果重要的话，所有元素的大小都相同。

.thing{
    display:inline-block;
    height:100px;
    width:100px;
    margin:5px;
}
.thing:nth-child(odd){
    background-color: #999;
    border-radius: 0 20px;
}
.thing:nth-child(even){
    background-color: #ccc;
    border-radius: 20px 0;
}
/* something that will only allow line breaks after 1st or 3rd or 5th etc element  */

有没有办法优雅地做到这一点？我想理论上可以为每个“案例”做一堆媒体查询块并使用 :nth-child():after 强制换行，但我想避免这种情况。

Answer 1

您可以使用 css 网格每行显示 3 个（或 5 个或任何需要的）。

.wrap-things {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}
.thing {
    height:100px;
    width:100px;
    margin: auto;
}
.thing:nth-child(odd){
    background-color: #999;
    border-radius: 0 20px;
}
.thing:nth-child(even){
    background-color: #ccc;
    border-radius: 20px 0;
}

<div class="wrap-things">
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
  <div class="thing"></div>
</div>