CSS强制每行奇数个元素

Question

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

.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  */

有没有办法优雅地做到这一点？我想理论上可以为每个“案例”做一堆媒体查询 block 并使用 :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>