Не работает. Вот в таком варианте https://codepen.io/anon/pen/LdYwEq не работает нижний маржин.
Отступы должны быть только между колонками, ни сверху, ни снизу. Как это реализовать?
Dubrovin, так никто не верстает и это и не должно работать. Для row добавляют отрицательный margin только по оси x.
.row {
margin-left: -10px;
margin-right: -10px;
}
И это используют только для универсальной сетки с рвзмерами задаными в процентах и переносами элементов по медиазапросам. Если вам не нужен такой функционал, то и отрицательный margin использовать не нужно.
Антон Спирин, как тогда добавить правильно вертикальные отступы между элементами в случае их переноса на новую строку? Можно пример на codepen?
Почему всё же не работают маржины по оси Y ?
Антон Спирин, дак вот на codepen задача, только нужно нижний margin убрать, чтобы отступы были только между колонками внутри row и если колонки в несколько рядов, то между ними вертикальные отступы были, при этом между верхней границей row и нижней границей row и колонками отступа быть не должно.
Нужно сделать то-же самое что реализуется с помощью:
display: grid;
grid-gap: 10px;
только на flexbox, потому что css grid не поддерживает перенос колонок при сжатии.
Dubrovin, набежало экспертов, вертикальный margin можно использовать, более того именно в этом случае и нужно, в меню часто бывают элементы неодинаковой высоты и их положеение надо коректировать.
Но существует такая штука как схлопывания вертикальных margin, именно из-за нее вертикальные margin и не любят. Если не умете с этим работать, то лучше использовать padding в родителе.
вы также можете оцентрировакть через flex, это будет удобнее всего, я бы сделал так.
Alexander Litvinenko, можете привести пример в codepen как можно реализовать сетку с отступами между колонками, чтобы границы родителя шли по линии внешних границ колонок?
Alexander Litvinenko, был бы код очень простым, сетка flexbox была бы уже стандартом, и не было бы велосипедов.
не можете привести пример, значит сами не до конца понимаете, как это реализовать.
Dubrovin, для чего вам такой странный кейс? Покажите практическое применение. Универсальную сетку так никто не делает. Либо делайте, что-то проще под конкретную задачу, либо делайте универсальную гибкую сетку.
Dubrovin, вы задачу свою опишите. Возможно вам тут даже сетка не нужна. Вы планируете количество элементов менять на строку? Если нет, ваше решение что-то вроде https://jsfiddle.net/rockon404/o650h1kb/ .
Если надо, то я не вижу в вашем примере ни одного медиазапроса. Более того, если вы покажите свою реальную задачу, то уверен, скорей всего выяснится, что вы выбрали не самый рациональный путь для ее реализации.
Антон Спирин, задача сверстать вот такую универсальную адаптивную сетку: prntscr.com/ip0osv
контейнер, который показан на скриншоте розовым, должен быть без отступов снизу сверху справа слева.
отступ должен быть только между элементами.
Это легко делается с помощью CSS Grid и Grid Gap, но адаптивность должна работать следующим образом:
если ширина у элементов (на скриншоте показаны жёлтым цветом) задана фиксированной в пикселях (width или min-width) и, например, для 3-х элементов в ряду эти элемены перестают "помещаться" в контейнер при сжатии экрана, то элементы должны переноситься на новую строку.
Медиазапросы хорошо работают когда колонки "резиновые", т.е. заданы в процентах. При этом идёт привязка к ширине экрана. А нужна сетка, которая будет отталкиваться от минимальной ширины элемента, чтобы если несколько элементов не помещаются в контейнер при сжатии, то они автоматически переносились. Сделать это с помощью CSS Grid, когда внутри грида элементы с разной шириной, насколько я знаю, невозможно, поэтому пытаюсь сделать это на Flexbox.
Вы предлагаете мне вариант с нижним margin внизу, но это не вариант, потому что этот маржин лишний, его не должно быть, если ниже элементов в контейнере больше нет других элементов.
Dubrovin, простите но это даже не трансформация на псевдоэлементах. Антон Спирин, незнаю, не вижу ниодной причины не использовать отрицательный margin если понимаешь что ты делаешь.
Alexander Litvinenko, когда нет другого выхода и действительно знаешь, что делаешь, то спору нет. Но поддерживать и масштабировать проще когда не используешь таких радикальных мер или хотя бы сводишь такие приемы к минимуму.
В данном случае, возможно, отрицательный margin и будет оптимальным решением. Хотя требования к сетке, имхо, высосаны из пальца и ничем внятным не обоснованы.
Dubrovin, на практике такое обычно не применяют, так как нижний margin в большинстве кейсов если и не необходимость, то приветствуется.
А нужна сетка, которая будет отталкиваться от минимальной ширины элемента, чтобы если несколько элементов не помещаются в контейнер при сжатии,
С такими требованиями у вас точно не получится универсальной сетки. это как минимум будет некрасиво и непредсказуемо смотреться, когда контент в контейнере разной ширины. В таком случае ваши карточки блога и портфолио будут смотреться весьма печально.
Если вы посмотрите сайты с сетками заполненными фиксированными элементами, то по-хорошему они работают немного по другим правилам, там по медиазапросам уменьшается ширина всего контейнера.
Советую проектировать такие вещи исходя из реальных задач, а для реальных задач в большинстве своем хватает простых и проверенных решений.
И тут напрашивается вопрос, а зачем вы вообще тратите время изобретая велосипед, когда есть целая куча готовых универсальных решений?
Антон Спирин, погуглите flexbox grid without media queries.
сетка вообще получается без медиазапросов, весь css сетки уменьшается в 1кб. На счёт разной ширины - если ширина нужна одинаковая то это легко делается модификатором у блока сетки с flex-grow: 1;
На счёт вашей кучи готовых универсальных решений - эти решения хреново работают, например, с формами, где в одном боксе могут лежать поля абсолютно разной, но кратной, ширины. Второй момент - размер, не встречал сетку размером меньше килобайта (возможно я плохо ищу).
На счёт своего вопроса - решение было простым, нужно было добавить overflow: hidden контейнеру, в котором находится ряд. При этом отрицательные маржины отлично работают по вертикали без костыля с нижним маржином, который вы предлагаете.
Ещё кстати минус вашего решения в том, что вы не сможете замиксовать класс колонки самому элементу, т.е. вам обязательно нужно вкладывать элементы внутрь div'а с колонкой (это потому что внутри вы используете именно положительный padding, а нужно использовать положительный margin, потому что padding используется для позиционирования содержимого контента, а не позиционирования элемента в блоке. Элементарный пример - Поле input или кнопка, у которых уже задан padding. В моём примере я могу замиксовать кнопку с колонкой и вложить в ряд, который является формой и всё это будет прекрасно адаптивно работать на любом экране без медиазапросов и без лишних дивов с class="col" и class="row").
p.s. Вы используете готовое, видимо потому, что у вас дедлайны и нет времени на подумать и изобрести своё, но лучше. У меня времени предостаточно :)
Dubrovin,
0. вы сначала пишите, что вам нужна сетка с фиксированными элементами, а затем скидываете пример с резиновыми элементами. Ваши элементы больше не фиксированные, так как вы добавили flex-grow. Не надо так. Учитесь точно формулировать требования.
1. По поводу сетки без медиазапросов. Я вам написал выше, что в таком случае медиазапросы ставят на контейнер. В противном случае при схлопывании сетки, она будет уже остального контента на странице. Что в большинстве случаев не должно происходить.
Решайте задачи опираясь на реальные кейсы.
2. Само решение с overflow: hidden - грубейший и нелепейший костыль. Попробуйте добавьте в элементы своей сетки dropdown или всплывающий tooltip и везде где они будут выходить за край сетки, они будут скрыты за overflow.
3. Ваша навязчивое желание уложиться 1кб в 2018 году не несет под собой никаких объективных плюсов. Надуманные предрассудки и экономия на спичках.
4. Если у вас не работают готовые решения, написанные профессионалами и прошедшие проверку временем, вывод напрашивается только один, вы не умеете их использовать.
5. Нижний margin в верстке сетки не костыль, в отличии от отрицательного.
6. Я вам своего решения не предлагал, разве скидывал фидл с простым и изящным решением, на случай если не нужна сетка и отрывок кода из Twitter Bootstrap 4. Если вы думаете, что вы лучший программист, чем команда Twitter, то вы очень сильно ошибаетесь.
Если вы в их решении замените padding на margin, то вся ваша верстка рассыпется. Лучше попробуйте детально разобрать их решение, посмотреть на бесчисленные кейсы применения и подумать, почему их универсальная сетка получилась именно такой какая она есть. Очень развивает.
7. Мы в компании как раз не используем готовых решений. Не используем по той простой причине, что умеем верстать и проектируем компоненты исходя из реальных задач, а проекты у нас большие и долгосрочные. Вам же я рекомендую не изобретать велосипеды и отталкиваться от решений профессионалов, так как, насколько я вижу, вы и верстаете плохо и опыта у вас, видимо, совсем нет, так как в ваших попытках найти решение уже промелькнула целая куча грубых костылей, которые дали бы о себе знать при попытке такое решение использовать.
Повторюсь. Проектируйте компоненты и их поведение исходя из реальных задач. Если надо универсальное решение, лучше берите готовое написаное профессионалами.
Простой
