Стой под стрелой

Волею судеб делаю тут веб-сайтик. Естественно, участвует CSS. И вот например сегодня мне надо было сделать, чтобы абсолютно позиционированный элемент растянулся на всю ширину страницы. По дефолту он растягивается только на ширину/высоту одного экрана. Как это решается? Добавлением position: relative к body.

Или вот вчера. Сделал grid, все классно. Слева обложка, справа какое-то количество рядов текста. Ставим обложке grid-row-end: span N, где N — количество рядов справа.

Если рядов больше, чем высота обложки, растягивается ячейка с обложкой. Прекрасно. Но если рядов _меньше_, то начинают растягиваться уже ряды, причем равномерно. А мне бы хотелось, чтобы они кучкой сверху собирались.

Говно вопрос! Нужно добавить еще один фиктивный ряд, который будет брать растягивание на себя. Правда он сожрет лишний gap, но gap я в итоге убрал по другим причинам.

Но как сделать растягивание именно одного ряда, но не больше высоты того, что слева? ХЗ! Кстати, если знаете, расскажите.

Я уже почти пошел просить помощи, как внезапно заметил, что если сделать grid-row-end: span N+1 у картинки, то добавится «несуществующий» еще один ряд и внезапно все остальные перестанут тянуться! Но только пока он не существует! Если добавить его по-настоящему, даже без контента, то тянуться опять начнут все равномерно.

Или прочитал такую штуку в твиттере: если обернуть один элемент в другой, например, плашку, то margin-ы не обернутся и плашка будет меньше нужного. Чтобы этого избежать, нужно сделать overflow: hidden. Казалось бы, ну где одно, а где другое, да? А вот так оно работает.

Но твит продолжается! Теперь, говорит, контент-то обрезается (вот это уже хотя бы логично). Че делать? А просто, говорит, добавь display: flow-root. И тут я окончательно сломался.

Представляешь, приходишь ты через месяц на этот CSS посмотреть, а там написано: overflow: hidden; display: flow-root; и думашь: а, ну логично! Первое это чтобы маргины включить, второе чтобы клиппинг убрать. Очевидно! Из названий следует!

Как вы все это терпите, я не понимаю.

www.tgoop.com/nikitonsky_pub/685

11.9K viewsNikita Prokopov, May 9 at 12:19

Волею судеб делаю тут веб-сайтик. Естественно, участвует CSS. И вот например сегодня мне надо было сделать, чтобы абсолютно позиционированный элемент растянулся на всю ширину страницы. По дефолту он растягивается только на ширину/высоту одного экрана. Как это решается? Добавлением position: relative к body.

Или вот вчера. Сделал grid, все классно. Слева обложка, справа какое-то количество рядов текста. Ставим обложке grid-row-end: span N, где N — количество рядов справа.

Если рядов больше, чем высота обложки, растягивается ячейка с обложкой. Прекрасно. Но если рядов _меньше_, то начинают растягиваться уже ряды, причем равномерно. А мне бы хотелось, чтобы они кучкой сверху собирались.

Говно вопрос! Нужно добавить еще один фиктивный ряд, который будет брать растягивание на себя. Правда он сожрет лишний gap, но gap я в итоге убрал по другим причинам.

Но как сделать растягивание именно одного ряда, но не больше высоты того, что слева? ХЗ! Кстати, если знаете, расскажите.

Я уже почти пошел просить помощи, как внезапно заметил, что если сделать grid-row-end: span N+1 у картинки, то добавится «несуществующий» еще один ряд и внезапно все остальные перестанут тянуться! Но только пока он не существует! Если добавить его по-настоящему, даже без контента, то тянуться опять начнут все равномерно.

Или прочитал такую штуку в твиттере: если обернуть один элемент в другой, например, плашку, то margin-ы не обернутся и плашка будет меньше нужного. Чтобы этого избежать, нужно сделать overflow: hidden. Казалось бы, ну где одно, а где другое, да? А вот так оно работает.

Но твит продолжается! Теперь, говорит, контент-то обрезается (вот это уже хотя бы логично). Че делать? А просто, говорит, добавь display: flow-root. И тут я окончательно сломался.

Представляешь, приходишь ты через месяц на этот CSS посмотреть, а там написано: overflow: hidden; display: flow-root; и думашь: а, ну логично! Первое это чтобы маргины включить, второе чтобы клиппинг убрать. Очевидно! Из названий следует!

Как вы все это терпите, я не понимаю.

BY Стой под стрелой