Javascript 除了CSS中的外部边框外，如何向动态填充的内容添加边框？

我正在尝试创建一个网格系统，其中内容将动态填充，因此在创建时我不知道元素的确切数量。到目前为止，我已经将每个元素添加到一个flexbox容器中，该容器每行包含3个元素。如果有3个以上的元素，那么下一个元素将转到下一行，依此类推。说到这里，我想做的就是在每个元素的周围加上边框，减去外部元素。所以看起来像这样

__|__|__
__|__|__
  |  |

我遇到的问题是，我一直在为每个元素添加底部边框和右边框，然后使用第n个子元素（3n）为每3个子元素添加0的边框。但这并不能解决底部一行的底部边框的问题，结果对我来说是这样的：

__|__|__
__|__|__
__|__|__

我不确定以该底部边框为目标并删除它的最佳方式，因为内容是动态填充的，我不知道该底部行上的元素的确切数量，因为它可能是1、2或3个元素。那么，什么是获得我想要的结果的最佳方式呢？是否可以单独使用CSS来实现这一点，或者我需要javascript来实现这一点？以下是我当前使用的代码：

.flexContainer {
    display: flex;
    flex-wrap: wrap;
}

.flexElement {
        width: 33.33%;
        border-right: solid 2px #e1e1e1;
        border-bottom: solid 2px #e1e1e1;

        &:nth-child(3n), &:last-child {
         border-right: none;
    }
}

---

我建议在顶部添加边框，并排除前三个元素

解决方案

.flexContainer {
  display: flex;
  flex-wrap: wrap;
}

.flexElement {
  width: 33.33%;
  border-right: solid 2px #e1e1e1;

  // Styles start on the 4th child
  &:nth-child(n+4) {
    border-top: solid 2px #e1e1e1;
  }

  &:nth-child(3n), &:last-child {
    border-right: none;
  }
}

看