Создание промежутка между столбцами с помощью CSS

То, чего вы пытаетесь достичь, уже создано с помощью начальной загрузки, но все же здесь есть рабочий JSFIDDLE.

CSS:

#container{
  width: 960px;
}

.squares{
  width: calc(98% / 3);
  margin-right: 1%;
  height: 250px;
  float:left;
  background: red;
}

.squares:last-child{
  margin-right: 0%;
}

Добавьте поле к вашему квадрату.

.squares{
width: 33.33%;
height: 250px;
background: red;
margin: 10px;
}

Я предполагаю, что, поскольку ваши элементы div соприкасаются, вы используете фреймворк с рамкой. Скрипка:

.squares{
  width: 33.33%;  
  padding: 5px;
  float: left;
}
.squares div {
    background: red;
    padding: 5px;
}

В принципе, то, что вы сделали, было правильно. Проблема в том, что сетке нужны отступы и внутренний объект. Всегда используйте отступы для сеток, а не полей, так математика намного проще. Гораздо проще написать 33% с любым отступом, который вы хотите, по сравнению с 30% с 3% справа от поля. Представьте, если бы вы решили изменить маржу и вам пришлось бы снова делать математику.

Вы хотите создать два новых класса с именами first и last.

Добавьте класс сначала в первый div, а последний класс — в последний div.

Примените общий левый и правый отступ к элементам div и задайте для них размер поля border-box.

Затем удалите заполнение, используя классы first и last.

Вот jsfiddle всего этого в игре: https://jsfiddle.net/b20n6rvt/4/

<div id="container">
  <div class="squares first">
    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <div class="squares">
    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
  <div class="squares last">
    <div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

CSS:

#container{
  width: 960px;
}

.squares{
  width: 33.33%;  
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  float: left;
}

.squares div {
  background: red;
}

.first { 
  padding-left: 0px;
}

.last { 
  padding-right: 0px;
}

Два способа добиться этого:

1) Используя display: table:

#container {
  width: 960px;
  display: table;
}
.squares {
  width: 33%;
  height: 250px;
  background: red;
  display: table-cell;
  border-right: solid 25px #fff;
}
.squares:nth-child(3) {
  border: 0;
}

<div id="container">
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
</div>

2) Использование поплавков:

#container {
  width: 960px;
}
.squares {
  width: 29%;
  height: 250px;
  background: red;
  margin: 3%;
  float: left;
}
.squares:nth-child(3) {
  margin-right: 0;
}
.squares:first-child {
  margin-left: 0;
}

<div id="container">
  <div class="squares"></div>
  <div class="squares"></div>
  <div class="squares"></div>
</div>

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

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

Чтобы заставить эту систему сетки работать, нужно выполнить несколько шагов.

1. Используйте бесценный * { box-sixing: border-box; }, чтобы создать блочную модель, в которой отступы и границы включены в ширину и высоту ваших элементов.
2. Создайте container/wrapper, в котором будет храниться ваш контент.
3. Используйте .row, чтобы держать .column. .row должен иметь ширину 100% + ширину желоба / 2 в качестве отрицательных полей. (Они будут рядом друг с другом.)
4. Clearfix ваши поплавки.

Демо

CSS

.squares {
     width: 33.3333%;
     display-:inline-block;
     float;left
      }
.squares + .squares {
    padding-left:5px;
}

Создайте внутри него блок красного цвета. Этот квадрат будет действовать как сетка.

Или вы можете заменить отступы на поля, но тогда вам нужно будет иметь квадраты одинаковой ширины, где ширина всех квадратов + поля = ширина родительского контейнера.