Перейти к публикации

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


Рекомендованные сообщения

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

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

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

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

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

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

 

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

01.jpg

02.jpg

03.jpg

Изменено пользователем GRAY
Ссылка на сообщение
Поделиться на других сайтах
.window {
    width: 200px;
    height: 200px;
    background: cyan;
    border: 4px solid black;
    box-sizing: border-box; // use this, Luke
}

 

Ссылка на сообщение
Поделиться на других сайтах

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

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

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

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

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

 

Ссылка на сообщение
Поделиться на других сайтах
4 минуты назад, GRAY сказал:

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

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

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

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

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

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Статистика пользователей

    47 325
    Всего пользователей
    1 451
    Рекорд онлайна
    shami
    Новый пользователь
    shami
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...