Помогите разобраться с gridом

[GRAY 0]

Привет всем, осваиваю grid верстку. Начал верстать макет 

И сразу поперли непонятки. Вопрос про контейнер с классом .article в него вложены

20 контейнеров с фиксированными размерами, которые должны образовывать красивую сетку с равными расстояниями между блоками. 

grid-column-gap: 10px;
grid-row-gap: 10px;

Однако, в результате имеем различное расстояние. А если менять масштаб в браузере - совсем жесть получается. 

Скрины прилагаю.

 

Вопрос один - где я НЕ ТАК? 

Изменено 23 февраля пользователем GRAY

[klierik 428]

.window {
    width: 200px;
    height: 200px;
    background: cyan;
    border: 4px solid black;
    box-sizing: border-box; // use this, Luke
}

 

[GRAY 0]

ТОП! Громадное спасибо, я не совсем понял как, но это сработало.

Хочу уточнить такой момент, меняя масштаб в браузере Ctrl + колесо мыши, я могу 

"имитировать" правильно большие разрешения на мониторе? Или получается нечто иное? Просто я сижу

на двух маленьких мониторах 1280х1024 и 1042х768 и если смотреть верстку в режиме "расширить" - тянуть окно браузера с одного моника на другой -  то все круто. НО, если скролить масштаб в браузере Ctrl + колесо мыши на одном монике - то на определенном моменте - верстку рвет. 

Подведя итог - скролинг это круто? Или нужно искать 4к монитор и там проверять?

 

[klierik 428]

4 минуты назад, GRAY сказал:

Хочу уточнить такой момент, меняя масштаб в браузере Ctrl + колесо мыши, я могу 

"имитировать" правильно большие разрешения на мониторе? Или получается нечто иное?

Это масштаб и только.

4 минуты назад, GRAY сказал:

Подведя итог - скролинг это круто? Или нужно искать 4к монитор и там проверять?

Можно попробовать нечто https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/

4 минуты назад, GRAY сказал:

НО, если скролить масштаб в браузере Ctrl + колесо мыши на одном монике - то на определенном моменте - верстку рвет. 

Это ожидаемая реакция. Если не соблюдены принципы "эластичных шаблонов" то такое будет так или иначе в большинстве случаев

[GRAY 0]

Спасибо, вы сделали мой день.