Comments 29
Не совсем понятно, зачем нужны дроби в grid-template. По идее же, если все числа пропорционально увеличить (в данном случае — умножить на 6), сетка не должна поменяться, с точностью до погрешностей округления?
Нет, я о другом. Почему нельзя написать так:
.golden-grid {
grid-template-rows: 6fr 6fr 12fr 24fr 16fr 32fr 32fr 26fr 17fr 21fr 21fr 17fr 26fr 32fr 32fr 16fr 24fr 12fr 6fr 6fr;
grid-template-columns: 6fr 6fr 12fr 24fr 16fr 32fr 32fr 26fr 17fr 21fr 21fr 17fr 26fr 32fr 32fr 16fr 24fr 12fr 6fr 6fr;
}
Или это мне проще думать про "n частей из 384", чем про "ячейка в n/m раз больше минимальной"?
Этому в институте учат, сеткам. Все дизайнеры получившие профильное образование это знают.
Тот же сафари еще где-то в 2016 при некоторых условиях с флексами творил чудеса, хотя поддержка все дела… А в edge несмотря на все утверждения о поддержки всегда находятся проблемы, сколько вопросов на том же тостере что про flex, что про грид, так что я не вижу смысла спорить с цифрами 98 явно выше 93 и в целом 93 явно мало, чтобы твердо так брать и бездумно использовать.
Снимаю шляпу...
Большое спасибо за статью. Когда хоть один раз увидел, то стало лучше, чем сто раз слышал про это ранее.
P.S. Уменьшите, пожалуйста, размеры абзацев, читать не возможно.
Я настолько не верстальщик, что не понял прикола про трансформацию текста. Можно поподробнее?
Если вы о технической составляющей, то смещения и повороты делаются через CSS-свойства transform (rotate — чтобы крутить, translateX/Y — чтобы перемещать) и transform-origin (в нашем контексте — чтобы крутить не вокруг центра, а вокруг угла элемента с последующим смещением на 100% в ту или иную сторону при необходимости). Про это уже столько раз писали, что мне показалось не нужным на этом подробно останавливаться, но если этот вопрос еще у кого-то возникнет, то может быть напишу отдельную статью про практическое применение трансформаций.
Я не совсем про это. Я про то, как мне заставить этот transform размазывать текст ровно под размер сетки. Понятно что можно сделать rotate(.25turn), мне интересно именно как заставить текст касаться обоих концов грида.
У меня появилась идея как реализовать растягивание текста под размер контейнера. Но это не спортивно)
Суть в том, чтобы текст запихнуть в SVG и там вместо самого шрифта использовать контуры. Таким образом у нас просто получится картинка, которую можно будет растягивать как захочется.
Pros
- кроссбраузерненько
- очевидно
Cons
- не спортивно и по сути без использования CSS
- придётся на каждое "буковку поменяй" заново генерировать SVG
а акцент делается на его представлении и оказании впечатления на посетителя. Глядя на такие сайты я не могу выбросить из головы те самые модные журналыПодозреваю, что на кого-то действительно это производит впечатление. Я же всегда недоумевал, как таких дизайнеров не увольняют? Тратить дорогую бумагу на что-то настолько бесполезное. Вместо того, чтобы получить контент, читатель получает выкрутасы дизайнера. Особенно это печально, когда целый журнал — каталог какой-нибудь продукции — оформляют в таком стиле. Зачем? Зачем они делают это?
А за статью спасибо. Grid — действительно шикарная вещь. Все эти таблицы и флоаты можно забыть как страшный сон.
А можете пожалуйста поделится этой сеткой для фотошопа?
Golden canon grid: страшилка для фронтендеров