Muslim Mamaev, что вы подразумеваете под словом "позиционировать"?
Но в любом случае вам нужно сделать три div с одинаковыми или разными классами или с дом классами-модификаторами (это зависит от вашего ответа на вопрос выше).
Если вам нужны три блока, то с помощью одного вы их вряд ли сделаете.
Но мы не видим всю задачу и, возможно, вы странно её сформулировали и ответ может оказаться другим.
Илья Петров, чтобы не размывалась подбирайте разницу между точками перехода градиента. Так чтобы не было ни зазубрин и сильного размытия.
Правда, на разных экранах/видяшках и т.д. всё равно может быть по-разному.
Применить те же стили, которые для мобильного через media для одного куска кода.
Дублировать могут потому что не могут перенести/спозиционировать его в нужное место на мобилках.
Тут нужно смотреть конкретные макеты и придумывать как сделать без дублирования.
В любом случае можно переместить на JS без дублирования.
В прямом. В css 1cm равен 38px, а вовсе не 1 сантиметру.
конвертирую в pdf - всё стает как нужно
Еще раз: проверьте скомпилированный css. Если он компилируется также как в песочнице, то нет ничего удивительного в странном результате. Если в нем нет ошибок, то следующим вопросом будет на скольки компах и скольки принтерах были проверки.
sciencefront, имеет смысл заглянуть в скомпилированный css.
Ещё у меня есть смутные воспоминания, что для принтера сантиметры тоже не будут сантиметрами, как и в браузере.
Но мне уже давно не нужен принтер, а pdf подтверждает эти воспоминания. Проверяйте самостоятельно.
Djents, ну уж первыми двумя вариантами-то вы можете самостоятельно?
Для 3 - у вас блоки фикс ширины, значит известно сколько их помещается при какой ширине вьюпорта. Да, будет удобнее, когда наконец появятся media от контейнера.
тоесть нельзя использовать без проблем display : flex
Любой современный сайт отправьте на печать.
Там наверняка что-то уедет, потому что большинство не оптимизированы под печать, но будет очевидно, что и флексы и гриды работают. А margin тем более.
Тег div используется только тогда, когда нет никакого другого, более подходящего.
Внутренний список, заголовок, картинка вкладываются в li точно также как в div.
Не очень понятно в чем у вас проблема.
Не забывайте проверять код валидатором, чтобы проверить, правильно ли вы все написали.