Как добавить границу в динамически заполненный контент, кроме внешних границ в CSS?

Question

Я пытаюсь создать грид-систему, в которой контент будет динамически заполняться, поэтому я не буду знать точное количество элементов при создании. Что у меня есть, так это то, что каждый элемент добавляется в контейнер flexbox, который содержит 3 элемента в каждой строке. Если имеется более 3 элементов, то следующий элемент перейдет к следующей строке и так далее. С учетом вышесказанного я пытаюсь добавить границы вокруг каждого элемента минус внешние. Так бы это выглядело примерно так.

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

Проблема, с которой я столкнулся, заключалась в том, что я добавлял нижнюю границу и правую границу к каждому элементу, а затем добавлял границу 0 для каждого третьего потомка, используя nth-child (3n). Но это не решает проблему с нижней границей в нижнем ряду, и это выглядит так для меня:

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

Я не уверен, что лучший способ нацелить эту нижнюю границу и удалить ее, потому что, поскольку содержимое заполняется динамически, я не буду знать точное количество элементов, которые будут в этой нижней строке, потому что это может быть 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;
    }
}

Answer 1

Я рекомендую добавить границу сверху и исключить первые три элемента.

Решение

.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;
  }
}

См. JSFiddle