Замена значения JSON на основе пары ключ-значение на jq

С flexbox, некоторыми псевдоэлементами, дополнительным div, и после многих разочарований я смог добиться этого без медиа-запросов (так как мне нужно было поставить свою сетку внутри множества разных элементов, запросы на медиа бы не работали для меня).

Одно предупреждение: водосточные желоба между предметами являются текучими.

Демо: http://codepen.io/anon/pen/OXvxEW

CSS:

.wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #ffc0cb;
    max-width: 1100px;
    margin: 0.5rem auto;
    justify-content: center;
}

.wrapper:after {
    content: ' ';
    flex: 1;
    height: 100%;
    border: 1px solid #00f;
    margin: 0.5rem;
}

.child {
    flex: 1;
    border: 2px solid #ffa500;
    min-width: 300px;
    margin: 0.5rem;
    text-align: center;
}

.child-contents {
    width: 300px;
    border: 2px solid #008000;
    height: 100px;
    margin: 0 auto;
}

HTML:

    

        

    
    

        

    
    

        

    

    ...etc., more .child's...

Конечным результатом является что-то вроде этого, где зеленые прямоугольники являются div. Розовые / оранжевые границы предназначены только для справки, чтобы вы могли видеть, что происходит. Если вы удалите границы розового / оранжевого цвета, вы должны получить сетку, которую вы ищете (, хотя, опять же, обратите внимание, что водосточный желоб ).