10 современных раскладок в одну строку CSS-кода

[neurocore]

Шёл 2020 год, ввели железное центрирование. Спасибо, CSS, что ты у нас есть.

[aPiks]

Неплохо было бы указывать поддержку браузеров тут.
Потому что все эти фэнси-шменси штуки круто выглядят на видео, но не у пользователя в смартфоне/планшете на Safari и/или no name китайском браузере, не говоря уже, что и Опера, не смотря на хромоский движок под капотом, не всегда корректно работает с css и js…

[AlexElkin]

вы где то в 98м застряли…

[aPiks]

position:sticky
Всё что на Хроме не поддерживает полноценно. А это половина рынка браузеров.
content-visibility
не поддерживается ничем, кроме Хрома.
WEB-RTC тоже пока туго работает
box-decoration-break
clip-path
CSS маски
color-adjust
в 98м всё было как раз таки гораздо проще.
Написал всё под Internet Explorer или Netscape и всё.
При чём всё было просто и легко.

[AVerem]

Всё что на Хроме не поддерживает полноценно. А это половина рынка браузеров.

Это было лет 5 назад. Сейчас хром больше 65% + 15% сафари с примерно такой же поддержкой.
И зачем писать о свойствах которых не было в статье? Флексы, гриды и clamp все нормальные браузеры поддерживают. За aspect-ratio написано, что экспериментальный.

[aPiks]

ну это человек говорит, что мы с поддержкой функций браузерами застряли в 98м, а я на примерах показал, что вообще-то нет и проблема актуальна, при чём больше, чем в 98м.

[devopg]

Вопрос про
«grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));»
Если много элементов работает как надо.
Если так получилось что 1 элемент и огромный монитор, то элемент растягивается на весь экран.
Вопрос таков: как сделать «если элементов 1, то работать как будто с 4 колонками. Но если элементов много, то работать как на видео.»

[fijj]

Через медиа-запросы

[Carduelis]

Поставить этому элементу max-width

[devopg]

про медиазапросы услышал.
Про макс вайд неверно: т.к. если добавляются элементы и ты растягиваешь сужаешь браузер появляются пустоты.

[AlexElkin]

вопрос был какой? если элементов мало — как будто 4ре колонки:
1. ни один медиа вам не посчитает кол-во элементов
2. max-width: 25% сделает первые 4ре блока, или меньше, как бы в 4х колонках а дальше магия начнется. можно использаовать разные клампы для ширины еще…

[virtyaluk]

Господа знатоки, подскажите, где можно подсмотреть структуру разметки документа для личного блога, чтобы такой документ легко съедался условным гугл ампом, инстант вювером в телеграмме и т.д. Спасибо.