Вот простой кусок верстки для показа 4 квадратов гридом 2х2. Но почему эти квадраты там тупо один под другим показываются?
Здравствуйте, Glestwid, Вы писали:
G>Вот простой кусок верстки для показа 4 квадратов гридом 2х2. Но почему эти квадраты там тупо один под другим показываются?
Достаточно выставить нулевой custom-margin, и будет показываться грид 2x2. В подробности не вникал.
Здравствуйте, Glestwid, Вы писали:
G>Вот простой кусок верстки для показа 4 квадратов гридом 2х2. Но почему эти квадраты там тупо один под другим показываются?
Патамушта не входят в экран.
Как вариант заменить md на xs, уменьшить размер (margin), или сделать чоткую (можно и через flex или table-layout например) таблицу а не row/col
Здравствуйте, Glestwid, Вы писали:
G>Попробовал — да, выставив margin для этого класса в 0, получил нужное расположение блоков, правда, без зазоров. Но решение какое-то бредовое, смахивает на какой-то глюк в броузерном движке, ане на системно правильное решение.
Вариантов, мне видится, как минимум два:
— научиться использовать Bootstrap
— не использовать Bootstrap
https://github.com/davidhartsough/you-dont-need-bootstrap
Здравствуйте, Glestwid, Вы писали:
G>Вот простой кусок верстки для показа 4 квадратов гридом 2х2. Но почему эти квадраты там тупо один под другим показываются?
Загляни внутрь. .row это на самом деле флексбокс, да ещё и flex-wrap: wrap;. Делать из него грид — так себе идея. Если тебе нужен именно грид, напиши вместо бутстрапповского свой класс с display: grid; и задай промежутки через gap. Добавить адаптивные брейкпоинты по вкусу.
P.S. jsfiddle явно верит в коллективную ответственность, поэтому инструкции только на пальцах. Был бы кодепен, я бы форкнул.
