Многоуровневое расписание на современном CSS. Нильс Биндер показывает, как с помощью grid, subgrid, round() и mod() построить расписание, где время точно ложится в строки, потоки остаются выровненными, а индикаторы времени и заголовки работают со скролл-анимацией. Подробный разбор структуры, вычислений и приёмов для сложных таймлайнов. #css #layout

https://9elements.com/blog/building-a-multi-stage-timetable-with-modern-css-using-grid-subgrid-round-and-mod/

Новые идеи для раскладок с CSS-сабгридами. Джош Комо объясняет, как сабгриды позволяют вложенным элементам делить родительскую сетку, чтобы карточки, портфолио и тарифы выравнивали изображения и текст по соседям, а не по отдельным сеткам. Подводные камни, вроде резервирования строк, нумерация линий, ограничения гибких сеток и фолбеки для старых браузеров. #css #layout

https://www.joshwcomeau.com/css/subgrid/

Представляем CSS grid lanes. Команда WebKit рассказывает о следующем большом шаге в раскладках для веба: CSS grid lanes добавляет раскладку в стиле masonry в CSS. Первая реализация уже доступна в Safari Technology Preview 234 и позволяет создавать гибкие и доступные раскладки контента и интерфейсов без JavaScript, используя новое свойство item-tolerance и все возможности CSS-гридов. #css #layout

https://webkit.org/blog/17660/introducing-css-grid-lanes/

Слишком ранний брейкпоинт. Ахмад Шадид объясняет, почему многие сайты переключаются на мобильную раскладку слишком рано. На примерах Time и TechCrunch он показывает, как дизайн ломается в сплитах, на планшетах и в превью ссылок iOS. Решение: промежуточные брейкпоинты, выражения от контейнера и гибкие раскладки на гридах и флексах, которые подстраиваются под доступное пространство. #css #layout

https://ishadeed.com/article/too-early-breakpoint/

Masonry-gridlanes-wc — нативный веб-компонент для masonry раскладки. Скалк Нитлинг создал веб-компонент для masonry-раскладки в соответствии с display: grid-lanes из спецификации CSS Grid Level 3. В браузерах с нативной поддержкой grid lanes компонент полностью уступает место браузеру. В остальных случаях используется JavaScript-фолбек для раскладки по колонкам и строкам с настраиваемыми отступами и шириной колонок. #webcomponents #layout

https://schalkneethling.com/posts/introducing-masonry-gridlanes-wc-a-native-first-masonry-web-component/

Синтаксис диапазонов в медиавыражениях. Ахмад Шадид показывает, как классические min-width и max-width приводят к ошибкам на совпадающих брейкпоинтах — например, два элемента скрываются на одних и тех же 300px. Решение: синтаксис диапазонов с операторами <=, >=, > — он поддерживается во всех браузерах с марта 2023. Код понятнее, без 1px сдвигов, и та же логика работает для выражений от контейнера. #css #layout

https://ishadeed.com/article/range-syntax/

Использование safe-area-inset для безопасных раскладок на мобильных. У современных телефонов есть вырезы, камеры и плавающие кнопки, которые перекрывают интерфейс, если их не учесть. В блоге Polypane разбирают env(safe-area-inset-*), зачем нужен viewport-fit=cover в <meta viewport>, как комбинировать отступы с calc(), а также новые safe-area-max-inset-*, которые не меняются, даже когда адресная строка прячется при прокрутке. #css #layout

https://polypane.app/blog/using-safe-area-inset-to-build-mobile-safe-layouts/

CSS-центрирование в 2026 году. Темани Афиф разбирает множество способов центрирования в CSS и показывает, как выбрать подходящий. Теория выравнивания с двумя уровнями и двумя осями, сравнение флексов, гридов, position: absolute и text-align, новое свойство text-box для обрезки отступов вокруг текста, anchor-center в якорном позиционировании, разница между безопасным и небезопасным центрированием. #css #layout

https://css-tricks.com/the-state-of-css-centering-in-2026/

CSS заполняет гэпы линейками. Брехт Де Рюйте разбирает новые CSS-свойства для оформления гэпов в гридах и флексах. Свойства column-rule и row-rule рисуют линейки в гэпах, а rule-break, rule-inset, rule-overlap и rule-visibility-items управляют пересечениями, длиной и условным отображением. Также линейки можно анимировать. #css #layout

https://utilitybend.com/blog/css-is-filling-the-gaps-with-rules-a-way-to-style-gaps-in-grid-and-flex

Представляем путеводитель по grid lanes. Джен Симмонс анонсирует новый интерактивный гайд по CSS grid lanes. Можно поиграть с песочницей в режимах Waterfall и Brick, разобраться в размерах треков через fr, minmax() и repeat(), а ещё пройтись по шести демо: фотографии, рецепты, газеты, меню, таймлайны и пинборды. Лучше всего работает в Safari 26.4+. #css #layout

https://webkit.org/blog/18098/introducing-the-field-guide-to-grid-lanes/

Перестраиваем вёрстку турнирной таблицы FIFA на CSS-сабгридах. Ахмад Шадид пересобирает сетку чемпионата мира с чистым DOM, отказавшись от обёрток-костылей на сайте. CSS-гриды задают колонки и строки, сабгриды позволяют вложенным матчам наследовать дорожки родителя, а отрицательные номера линий вроде grid-column: -2 дают гибкость. Флексы центрируют матчи по вертикали, а выражения от контейнера подстраивают вёрстку под доступное место. #css #layout

https://ishadeed.com/article/fifa-layout/

Балансируем флекс-элементы свойством flex-wrap: balance. Ахмад Шадид начинает с вёрстки на сайте Buffer, где в последней строке остаётся один элемент, и показывает пять способов это исправить: выражения от контейнера, условный clamp() для max-width, display: contents, разделитель на псевдоэлементе и, наконец, flex-wrap: balance из Chrome 150 — всего одно объявление. Свойство flex-line-count задаёт минимальное число строк. #css #layout

https://ishadeed.com/article/flex-wrap-balance/

Выравниваем иконки и подписи. Ахмад Шадид начинает со списка, где align-items: center сбивается, стоит подписи перенестись на вторую строку, а align-items: start поднимает иконку слишком высоко из-за строчного бокса. Помогает единица lh: половина разницы между строкой и размером иконки задаётся как смещение через translateY и работает при любом размере шрифта. Фоновым иконкам на псевдоэлементах нужна пара дополнительных объявлений. #css #layout

https://ishadeed.com/article/aligning-list-icons/

Подгоняем высоту под размер фонового паттерна с помощью calc-size(). Ахмад Шадид начинает с секции, где паттерн, повторяющийся по обеим осям, обрезается снизу. С background-repeat: round обрезки нет, но плитки растягиваются или сжимаются. А вот height: calc-size(auto, round(up, size, var(--tile-height))) берёт высоту контента и округляет её вверх до ближайшего кратного высоте плитки. Тот же round() подгоняет под паттерн и padding-block. Пока только в Chrome. #css #layout

https://ishadeed.com/article/fit-height-background-pattern-calc-size/