Антон Спирин, погуглите flexbox grid without media queries.
сетка вообще получается без медиазапросов, весь css сетки уменьшается в 1кб. На счёт разной ширины - если ширина нужна одинаковая то это легко делается модификатором у блока сетки с flex-grow: 1;
На счёт вашей кучи готовых универсальных решений - эти решения хреново работают, например, с формами, где в одном боксе могут лежать поля абсолютно разной, но кратной, ширины. Второй момент - размер, не встречал сетку размером меньше килобайта (возможно я плохо ищу).
На счёт своего вопроса - решение было простым, нужно было добавить overflow: hidden контейнеру, в котором находится ряд. При этом отрицательные маржины отлично работают по вертикали без костыля с нижним маржином, который вы предлагаете.
Ещё кстати минус вашего решения в том, что вы не сможете замиксовать класс колонки самому элементу, т.е. вам обязательно нужно вкладывать элементы внутрь div'а с колонкой (это потому что внутри вы используете именно положительный padding, а нужно использовать положительный margin, потому что padding используется для позиционирования содержимого контента, а не позиционирования элемента в блоке. Элементарный пример - Поле input или кнопка, у которых уже задан padding. В моём примере я могу замиксовать кнопку с колонкой и вложить в ряд, который является формой и всё это будет прекрасно адаптивно работать на любом экране без медиазапросов и без лишних дивов с class="col" и class="row").
p.s. Вы используете готовое, видимо потому, что у вас дедлайны и нет времени на подумать и изобрести своё, но лучше. У меня времени предостаточно :)
Антон Спирин, задача сверстать вот такую универсальную адаптивную сетку: prntscr.com/ip0osv
контейнер, который показан на скриншоте розовым, должен быть без отступов снизу сверху справа слева.
отступ должен быть только между элементами.
Это легко делается с помощью CSS Grid и Grid Gap, но адаптивность должна работать следующим образом:
если ширина у элементов (на скриншоте показаны жёлтым цветом) задана фиксированной в пикселях (width или min-width) и, например, для 3-х элементов в ряду эти элемены перестают "помещаться" в контейнер при сжатии экрана, то элементы должны переноситься на новую строку.
Медиазапросы хорошо работают когда колонки "резиновые", т.е. заданы в процентах. При этом идёт привязка к ширине экрана. А нужна сетка, которая будет отталкиваться от минимальной ширины элемента, чтобы если несколько элементов не помещаются в контейнер при сжатии, то они автоматически переносились. Сделать это с помощью CSS Grid, когда внутри грида элементы с разной шириной, насколько я знаю, невозможно, поэтому пытаюсь сделать это на Flexbox.
Вы предлагаете мне вариант с нижним margin внизу, но это не вариант, потому что этот маржин лишний, его не должно быть, если ниже элементов в контейнере больше нет других элементов.
Alexander Litvinenko, был бы код очень простым, сетка flexbox была бы уже стандартом, и не было бы велосипедов.
не можете привести пример, значит сами не до конца понимаете, как это реализовать.
Alexander Litvinenko, можете привести пример в codepen как можно реализовать сетку с отступами между колонками, чтобы границы родителя шли по линии внешних границ колонок?
Антон Спирин, дак вот на codepen задача, только нужно нижний margin убрать, чтобы отступы были только между колонками внутри row и если колонки в несколько рядов, то между ними вертикальные отступы были, при этом между верхней границей row и нижней границей row и колонками отступа быть не должно.
Нужно сделать то-же самое что реализуется с помощью:
display: grid;
grid-gap: 10px;
только на flexbox, потому что css grid не поддерживает перенос колонок при сжатии.
Антон Спирин, как тогда добавить правильно вертикальные отступы между элементами в случае их переноса на новую строку? Можно пример на codepen?
Почему всё же не работают маржины по оси Y ?
Не работает. Вот в таком варианте https://codepen.io/anon/pen/LdYwEq не работает нижний маржин.
Отступы должны быть только между колонками, ни сверху, ни снизу. Как это реализовать?
Хотя нет, blur прекрасно работает, браузер запоминает позицию последнего фокуса и продолжает выбирать элементы после элемента, на котором был клик, что вполне предсказуемо. Спасибо.
Эффект фокуса у элемента должен быть для управления с клавиатуры. Делать blur в данном случае неправильно, потому что клик на таком элементе уберёт фокус с элемента, который находился в фокусе до клика. Т.е. по факту фокус всё таки будет (отключить фокус и включить/выключить не одно и то же).
Возможно, есть какой-нибудь CSS селектор или HTML атрибут который будет указывать браузеру что на данном элементе нужно отлючить автофокус по клику?
Ну ридонли конечно же поле не должно становиться, мышь должна стандартно реагировать на input.
По-идее, я так понял, что у инпута нет такого стандартного состояния чтобы он был в фокусе и при этом не моргал курсор, получается, дефолтное поведение по нажатию на кнопку Enter должно быть таким же как и при нажатии на кнопку Tab, т.е. переходить к следующему элементу с tabindex.
Можете подсказать каким образом это реализовать? (желательно на нативном js)
Рекомендую вместо \s использовать именно пробел ( или символьный класс пробела [ ] ), так как \s - это пробельный символ (таб, пробел или перенос строки).