Jump to content
  • 0

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


Question

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

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

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

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

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

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

 

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

01.jpg

02.jpg

03.jpg

Edited by GRAY
Link to post
Share on other sites

4 answers to this question

Recommended Posts

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

 

Link to post
Share on other sites
  • 0

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

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

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

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

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

 

Link to post
Share on other sites
  • 0
4 минуты назад, GRAY сказал:

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

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

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

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

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

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

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

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Комментарии

    • Весеннее обострение! Здравствуйте! Весна добралась уже до каждого уголка, где Intersect.Host предоставляет свои услуги. В каждой стране (а у Intersect.Host сервера располагаются в 7 странах) люди уже радуются теплому весеннему солнцу, последний снег уже сходит и природа просыпается. Мы предлагаем скидку равноценно средней температуре за неделю в каждом городе, где расположены наши серверы. Таким образом: VPS/VDS Россия -8% на все сервера, на продление и покупку. VPS/VDS Молдавия -12% на все сервера, на продление и покупку. VPS/VDS Нидерланды -7% на все сервера, на продление и покупку. VPS/VDS Латвия -6% на все сервера, на продление и покупку. VPS/VDS Украина -11% на все сервера, на продление и покупку. VPS/VDS Гонконг -21% на все сервера, на продление и покупку. VPS/VDS США -13% на все сервера, на продление и покупку. Используйте промокод "LoveSpring" и пользуйтесь скидкой на сервера. Акция актуальна до 11.04.2021  Наши контакты: Сайт - https://intersect.host/ Телеграм - @IntersectHost Тикет - https://bill.intersect.host/billmgr  
    • Соскучились ? :) Хотим поделиться с вами радостными новостями и предложить вам интересный купон :) В ближайшее время, по вашим просьбам, мы добавим услугу Мобильные прокси, сейчас мы ищем 50 тестировщиков, которые после тестирования, получат 50% скидку на услугу Мобильные прокси. А пока, можете воспользоваться вкуснейшим промо-кодом на 20% для всех текущих услуг Промо-код WOW действует до 12 апреля, успей приобрести наши услуги намного дешевле. Наш сайт https://proxywhite.com
    • Https://dropmefiles.com/sYyOA Вот ссылка на проект. Создайте папку "img" и в ней папку "jac" и закиньте туда фотки, файл-обменик их зачем то удалил. В общем по фотке видно всё нормально, но я смог сделать, чтобы либо работала "система следующей фотки", либо "система по нажатию снизу фоток". Совместно оно не работает. Помогите пожалуйста, замучился уже 5 день мучаюсь. Проблема чисто в скрипте JS. Желательно сделать рабочую систему на 1-ой JS, 2-я жс немного как по мне не удобна.
    • Перенос коробки Битрикс24 в облако для клиента Друзья, работаете с коробочной версией Битрикс24 или планируете внедрить её в работу? Разместите CRM в надёжных облаках от Tucha — рекомендованного хостинг-партнёра Битрикс24. Наши виртуальные серверы имеют специальное окружение Bitrix Environment для продуктивной работы коробки и соответствуют всем требованиям её разработчика. На примере реального проекта рассказываем, как происходит процесс переноса CRM на сервер и сколько стоит такое решение: https://tucha.ua/ru/solutions/perenos-korobki-bitriks24-v-oblako-dlya-klienta-realnyy-primer. А для лёгкого старта работы в облаке с популярной редакцией «Корпоративный портал 50» дарим специальные условия! При заказе акционных конфигураций VPS до 03.05.2021 включительно вы получите: 1.    Скидку 10 евро* на оплату первого счёта. 2.    Услугу по подключению локального принтера к виртуальному серверу от службы технической поддержки Tucha в подарок. Чтобы воспользоваться предложением, звоните +380 44 583-5-583 или пишите нам по адресу sales@tucha.ua и укажите промокод TD-232-0. Не упустите возможность перенести коробку Битрикс24 в облака с приятными бонусами! *В гривнах на первое число текущего месяца.
    • Друзья у нас радостная новость Для услуги VPN https://altvpn.com/ru/vpn/ Мы разработали приложения для Windows, Android, Mac OS, IOS (IOS пока не пропустили в App Store) Приложения находится в стадии тестирования, поэтому на сайте мы их еще не опубликовали, но уже можно его попробовать, написав нам в службу поддержки https://altvpn.com/ru/support/ или связаться с консультантом (поддержка 24/7) Но это еще не все, многие просят чтобы мы добавили услугу Мобильные прокси, поэтому по многочисленным просьбам мы уже работаем над этим и ищем тестировщиков, оставьте свою почту нашему оператору или свяжитесь с нами https://altvpn.com/ru/support/ при появлении услуги на сайте, вы автоматически получите промо-код на 40% для покупки. Для всех верных и постоянных клиентов у нас скидки в размере 25% на все услуги, кроме пакетных прокси-серверов. Промо-код MOBILE предоставит вам скидку в размере 25% осталось только ввести его и купить. Акция действует до 15 апреля, успейте купить по вкусным ценам.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.