CSS: Как определить интервал между чувствительными столбцами

Question

Мне нужно предоставить интерфейс для проекта, где редактор может определять элементы контейнера с некоторыми переменными: он/она должен иметь возможность определять, сколько столбцов есть и как они ведут себя на разных размерах экрана.

Для этого я взял решетку сетки (здесь: регрессивные сетки PureCSS) и позвольте ему выбрать размер столбца для данного столбца для заданного размера экрана. Таким образом, можно определить, будет ли на экране размером «большой» в этой строке должно быть два или три столбца, прежде чем он перейдет в следующую строку.

Я объясняю это не из-за технической части, а из-за того, что из-за этого у меня возникают проблемы.

Ситуация заключается в том, что макет страницы требует заполнения между этими столбцами, но не на внешней стороне строки.

Я пытаюсь решить эту проблему, используя небольшую настройку правил CSS поверх используемой структуры, которая работает нормально - пока это одна строка, которая не переносится на следующую строку. При меньшей ширине экрана он обертывается так, как должен, но прокладки больше не работают.

Вы знаете, как я мог это решить, имея в виду, что он должен состоять из правил, которые применяются «автоматически», без необходимости полагаться на дополнительные классы CSS?

Я сделал скрипку, чтобы продемонстрировать свою проблему. Редактору не нужно определять paddings для каждого размера экрана, поскольку он уже определяет размеры столбцов для него. Отступы должны работать «автоматически» таким образом.

<style> 
    /* Using SCSS for convenience */ 
    body { 
     padding: 1em; 
    } 

    .pure-g { 
     margin-bottom: 1em; 

     > div { 
     border: thin solid black; 
     box-sizing: border-box; 
     padding: 0 .5em 1em .5em; 

     &:first-child { 
      padding-left: 0; 
      padding-right: .66em; 
     } 

     &:last-child { 
      padding-left: .66em; 
      padding-right: 0; 
     } 

     > div { 
      box-sizing: border-box; 
      height: 10em; 
      background-color: green; 
     } 
     } 

     &[data-cols="3"] { 
     > div:nth-child(2) { 
      padding-left: .33em; 
      padding-right: .33em; 
     } 
     } 

     &[data-cols="4"] { 
     > div:nth-child(2) { 
      padding-left: .33em; 
     } 

     > div:nth-child(3) { 
      padding-right: .33em; 
     } 
     } 
    } 
</style> 

<div class="pure-g" data-cols="3"> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-3"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1 pure-u-lg-1-3"><div></div></div> 
</div> 

<div class="pure-g" data-cols="4"> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div></div></div> 
</div> 

<div class="pure-g" data-cols="5"> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-5"><div></div></div> 
    <div class="pure-u-1 pure-u-md-1 pure-u-lg-1-5"><div></div></div> 
</div> 

Краткое объяснение того, что я делал до сих пор:

• Тело должно иметь отступы, так что столбцы не трогать границы страницы. Можно было бы утверждать, что это может быть обработано столбцами, но в моей реальной ситуации там больше: ограниченная ширина контейнера вместо тела.
• Столбцы всегда должны иметь одно прокладку между собой, а 1-й край - снизу.
• Чтобы сделать столбцы с равным внутренним размером, мне нужно немного отрегулировать прокладку: из-за того, что нет внешней прокладки, первый и последний столбцы должны настраивать свои paddings, то же самое с теми, re touching. Я думаю, вы поймете, что я имею в виду.
• (Границы и внутренний DIV только визуализировать вещи)

https://jsfiddle.net/1jv43g02/

Спасибо за вашу помощь

Arne

Answer 1

Из комментариев:

Возьмем пример на Twitter Bootstrap. Колонны имеют такое же право и левый отступы padding: 0 20px; и строки будут отрицать, что заполнение через margin: 0 -20px; вызывая строку для заполнения желаемого 100% емкости