Дмитрий, очень даже то, если рассматривать чистый css. Гридами просто так это не решается.
Только с помощью js. Либо классическим плагином Masonry либо его аналогами (есть отдельно и для гридов).
Muslim Mamaev, что вы подразумеваете под словом "позиционировать"?
Но в любом случае вам нужно сделать три div с одинаковыми или разными классами или с дом классами-модификаторами (это зависит от вашего ответа на вопрос выше).
Если вам нужны три блока, то с помощью одного вы их вряд ли сделаете.
Но мы не видим всю задачу и, возможно, вы странно её сформулировали и ответ может оказаться другим.
Илья Петров, чтобы не размывалась подбирайте разницу между точками перехода градиента. Так чтобы не было ни зазубрин и сильного размытия.
Правда, на разных экранах/видяшках и т.д. всё равно может быть по-разному.
Применить те же стили, которые для мобильного через media для одного куска кода.
Дублировать могут потому что не могут перенести/спозиционировать его в нужное место на мобилках.
Тут нужно смотреть конкретные макеты и придумывать как сделать без дублирования.
В любом случае можно переместить на JS без дублирования.
В прямом. В css 1cm равен 38px, а вовсе не 1 сантиметру.
конвертирую в pdf - всё стает как нужно
Еще раз: проверьте скомпилированный css. Если он компилируется также как в песочнице, то нет ничего удивительного в странном результате. Если в нем нет ошибок, то следующим вопросом будет на скольки компах и скольки принтерах были проверки.
sciencefront, имеет смысл заглянуть в скомпилированный css.
Ещё у меня есть смутные воспоминания, что для принтера сантиметры тоже не будут сантиметрами, как и в браузере.
Но мне уже давно не нужен принтер, а pdf подтверждает эти воспоминания. Проверяйте самостоятельно.
у меня никуда никто не ползет https://codepen.io/AnnaSummer/pen/poLZvVV