Целевой средний дочерний элемент нескольких макетов из 3 столбцов

Question

У меня есть массив объектов, которые содержат детали, которые я хочу визуализировать в DOM

searches.content.map((search, i) => {
   //....logic done here
   return <div class="SavedSearchBox">search.title</div>
)}

У меня есть следующий CSS для рендеринга строки из 3 столбцов, поэтому будет 3 SavedSearchBoxв каждой строке.

.SavedSearchBox {
   width: 33.33333333%;
   border: 1px solid #d8d8d8;
   display: inline-block;
   vertical-align: top;
   float: left;
}

Я хочу нацелить средний столбец в каждой строке, чтобы добавить горизонтальное поле, хотя я не уверен, как?

Кроме того, учитывая, что возвращаемая разметкане всегда будет делиться на 3, поэтому, управляя случаями, когда общий доход равен 10 или 11, я тоже хочу добавить поля там.

Я рад услышать любые решения JS (пожалуйста, не используйте jQuery, так какЯ использую React и предпочел бы не использовать jQuery) или решения CSS / SASS.

По сути, я хочу следующее ...

 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------

и для случаев, когдаделится на 3

 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
       | margin | margin |    
        -------- -------

и

 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
| no margin | margin | no margin |
 ----------- -------- -----------
            | margin |    
             -------

У меня есть jfiddle для его проверки, по крайней мере, для css.

Answer 1

На самом деле это звучит так, как будто у вас есть проблема X-Y, и вы можете использовать Flexbox для достижения этой цели следующим образом:

.container {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  margin: 0 -1.5%;
}

.container .SavedSearchBox {
  background: whiteSmoke;
  box-sizing: border-box;
  margin: 10px 1.5%;
  padding: 10px;
  text-align: center;
  width: 30%;
}

<div class="container">
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
  <div class="SavedSearchBox">search.title</div>
</div>