Добавление желобов в выполненный на заказ пояс без заполнения

#html #css #grid #gutter

#HTML #css #сетка #желоб

Вопрос:

Итак, я боролся с этой ситуацией.
Разметка

 <div id="container">
        <div class="grid">
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
                </div>
            </div>
            <div class="col-1-2">
                <div class="module">
                    <h3>1/2</h3>
                </div>
            </div>
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
            </div>
         </div>
 </div>

CSS

  *{
     box-sizing :  border-box;
 }
 [class *="col"]{
      float : left;
      height : auto;
      overflow: hidden;
 }
 .col-1-2{
      width : 50%;
 }

.col-1-4{
   width : 25%;
 }

#container{
    width : 960px;
    padding : 20px;
    margin : 10px auto 0 auto;
}

.module {
  padding: 20px;
  background: #eee;
  font-family: sans-serif; 
}

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

Теперь я попытался подделать желоба, отредактировав существующий стиль CSS [class*="col"] и добавив padding-right : 20px к нему

 [class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-right : 20px;
}

Теперь все выглядит так

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

Ответ №1:

Вы можете добавить отступы к левой и правой границе блока

 [class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding : 0 10px;
}

 #container{
    padding:10px;
}

1. Спасибо за решение, но это приводит к тому, что один из 1/4 divs растягивается, а другой сжимается, что приводит к изменению их ширины.

2. Так что попробуйте только padding:0 10px; ваш class=col и удалите n-й дочерний элемент

Ответ №2:

Пожалуйста, попробуйте изменить свой CSS, как показано ниже

 [class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-left: 20px;
}

Добавьте нижеприведенное в свой CSS

 [class *="col"]:first-child{
     padding-left : 0px;
}