Для того чтобы создать расстояние между квадратиками, можно использовать свойство `margin` в CSS. Это свойство позволяет задать внешние отступы для элементов, тем самым создавая пространство между ними.
Относительно того, почему в вашем примере получается 8 квадратов, это зависит от настройки CSS Grid или Flexbox (в зависимости от того, что вы используете). Чтобы проверить и понять, почему именно 8 квадратов, нужно знать, как именно вы их отображаете и формируете.
К примеру, если использовать CSS Grid, и у вас установлено `grid-template-columns: repeat(4, 1fr);`, то будет 4 колонки, и, следуя этому, у вас будет 8 квадратов, если количество элементов в контейнере при этом равно 8.
Если вы хотите добавить расстояние между квадратами, вы можете обновить CSS, добавив что-то вроде:
```css
.square {
width: 50px;
height: 50px;
background-color: blue;
margin: 10px; /* Добавляем расстояние между квадратиками */
}
```
Если вы используете Grid, можете также воспользоваться свойством `grid-gap` или просто `gap`:
```css
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px; /* Это создаст расстояние между квадратиками */
}
```
Таким образом, чтобы получить правильное представление, нужно будет изучить структуру HTML и CSS вашего примера, чтобы понять, как именно количество квадратиков формируется.