CSS3 Grid Layout

Ещё одна коллекция интересных фактов про CSS-гриды (CSS Grid Layout)

Перевод статьи Another Collection of Interesting Facts About CSS Grid с сайта css-tricks.com для CSS-live.ru, автор — Мануэль Матузович

В прошлом году я собрал коллекцию интересных фактов о CSS Grid Layout после моего мастер-класса. В этом году я работал над другим мастер-классом и узнал ещё несколько увлекательных фактов о нашей любимой спецификации раскладки.

Я не жадный, поэтому ещё раз с радостью поделюсь своими знаниями и выводами с вами, с сообществом CSS-Tricks.

CSS-гриды + CSS-колонки = ♥

Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет

В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки.

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

Гриды 2 уровня не за горами!

По инсайдерской информации из W3C, просочившейся наружу в виде твита Рейчел Эндрю, рабочая группа CSS решила опубликовать первый рабочий черновик CSS-гридов второго уровня. С долгожданными подсетками и не только!

Пока CSS-гриды второго уровня существуют только в виде редакторского… даже не черновика, а «неофициального предложения», сборника набросков «идей на будущее». Зато вариантов синтаксиса для подсеток в нем целых 2, включая гибкую возможность создавать подсетки только по одной оси — только вдоль рядов или только вдоль колонок. Еще в числе этих неофициальных набросков — интересная идея грид-интервалов, сохраняющих свои пропорции. А тема пропорций в эти дни вообще была популярна.

Снова о CSS Box Alignment (свойствах для выравнивания всего): простая шпаргалка

Спецификация CSS Box Alignment становится всё более зрелой, и кроме шпаргалки по выравниванию блоков Рейчел Эндрю и нашего обзора свойств для выравнивания всего в сети появляются новые материалы о ней. Пожалуй, пришла пора и нам освежить знания об этих свойствах.

Что может поломать макет на гридах (CSS Grid Layout)

Перевод статьи BREAKING THE GRID с сайта daverupert.com для CSS-live.ru, автор — Дейв Руперт

Два способа поломать CSS-гриды, и как их починить

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

В итоге я нашёл два способа поломать CSS-гриды. Как это бывает, я умудрился в одной раскладке сделать и то, и другое. 

Руководство по флексбоксам и гридам для дизайнеров

Перевод статьи Designer’s Guide to Flexbox and Grid с сайта medium.com для CSS-live.ru, автор — Джон Яблонски

Главная картинка

Что надо знать дизайнерам про эти раскладочные инструменты и перемены, которые они несут

Со своего появления в 1996-м CSS прошел немалый путь, но доступные нам инструменты для верстки макетов особо не менялись. Табличные раскладки были чересчур жесткими, раскладки на флоатах по сути были хаком, раскладки на основе позиционирования не адаптировались, и ничто из этого не могло эффективно справиться с растущей сложностью. Поймите меня правильно — мы многого добились с этими методами, но они не предназначались для верстки сложных макетов.

Свойства для интервалов (*-gap) становятся универсальными

Из Парижа (на фото), где недавно проходила встреча рабочей группы CSS, прилетела занятная новость: свойства grid-row-gap и grid-column-gap, а также их сокращение grid-gap…

Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас

Перевод статьи Building Production-Ready CSS Grid Layouts Today с сайта smashingmagazine.com для CSS-live.ru, автор — Мортен Рэнд-Хедриксен

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

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

О технических аспектах CSS-гридов и их одномерных родственников — флексбоксов — уже немало сказано более знающими людьми. В этой статье я хочу применить эти понятия на практике. С чего начинать освоение новых возможностей для верстки и сложных моментов CSS-гридов, какие старые проблемы они решают, и как начать использовать этот модуль на реальных сайтах уже сегодня.

Я буду рассматривать и приводить примеры для тем WordPress, но практические подходы и примеры универсальны и их можно использовать в любом веб-проекте, независимо от CMS, стека технологий или инструмента.

Приступим!

От бутстрапа — к CSS-гридам

Перевод статьи Bootstrap to CSS Grid с сайта medium.com для CSS-live.ru, автор — Наталия Шелберн

0-pkfyT6WJt5lNNKkH

«У меня пока нет возможности использовать CSS Grid»

Вы можете уже написать заветную строчку display:grid, только если вы сами полностью отвечаете за свой код. Но если вы работаете в большой команде, на старом проекте, либо сталкиваетесь с ограничениями реального мира, будьте готовы к тому, что сначала придется преодолеть несколько препятствий.

Новые гриды уже в Edge Insider Preview

Радостная новость от Microsoft: буквально несколько часов назад статус самого, наверное, популярного запроса к разработчикам Edge — обновить реализацию CSS-гридов до соответствия актуальной спецификации — сменился с «В разработке» на «Доступен в превью» (конкретно, в Windows 10 Insider Preview build 16226). Пока за флагом, но зато уже без префикса.

Темп, с которым браузеры — даже традиционно «неторопливые» — подхватывают это долгожданное нововведение, безумно радует. Есть все шансы, что к концу года гриды действительно станут повсеместными (кроме, возможно, совсем старых андроидов, которым в любом случае лучше давать упрощенную мобильную раскладку). Так что спешите осваивать все возможности новой эры верстки!

Большая статья про гриды (CSS Grid Layout)

Мы давно изучали CSS-гриды, сами и вместе с зарубежными авторами. Тогда же возникла мысль оформить результат в виде подробного руководства по ним, вроде этого по флексбоксам. Это оказалось не так-то просто: стандарт большой, вводит множество новых понятий, к тому же эти понятия переплетены друг с другом, совсем как полосы самих гридов (как показать грид-области без привязанных к ним грид-элементов, и наоборот?). Поэтому работа над статьей, скажем прямо, несколько затянулась:) Но теперь, когда грид-раскладка уже поддерживается почти повсеместно (Firefox 52+, Chrome 57+, Opera 44+, Safari 10.1+/iOS 10.3+ Safari, Яндекс-Браузер 17+, а также в Android WebView), мы рады представить вам результат трудов. Надеемся, он поможет разобраться в горах новых возможностей. Это не «полное руководство» (полностью описать все возможности CSS Grid в одной статье просто нереально!), но мы постарались упомянуть некоторые важные моменты, упущенные многими из «полных руководств». Любые дополнения и уточнения приветствуются!

Как работает функция minmax()

Перевод статьи How the minmax() Function Works с сайта bitsofco.de, опубликовано на css-live.ru с разрешения автора — Ире Адеринокун.

Одна из невероятно полезных новинок спецификации CSS Grid Layout — функция minmax(). Эта функция открывает нам возможность писать более мощный и лаконичный CSS, позволяя задавать в качестве значения для грид-полосы функцию, включающую и минимальное, и максимальное значения.

Изучаем CSS-гриды

Перевод статьи Learning CSS Grids с сайта varun.ca для CSS-live.ru, автор — Варун Вачхар

+-------------------------+ +---+
|                         | |   |
|  CSS Grid               | |   |
|  Layout Module          | |   |
|                         | |   |
+-------------------------+ |   |
+----+ +------------------+ |   |
|    | |                  | |   |
|    | |                  | |   |
|    | +------------------+ +---+
|    | +------+ +---------------+
|    | |      | |               |
+----+ +------+ +---------------+

CSS-гриды пришли! С марта 2017-го их поддерживают все основные браузеры. В свете этой хорошей новости я решил выкроить немного времени, чтобы лучше понять, как их использовать. Изучение далось мне ощутимо тяжелее, чем я рассчитывал — модуль CSS Grid Layout вводит порядка 17 новых понятий. Пытаться охватить их все было как-то слишком, так что я стал дробить материал на части, поясняя их заметками и примерами, которыми я и собираюсь поделиться. Это ни в коей мере не исчерпывающее руководство. Возможно, оно даже не на 100% фактически верно. Но оно должно дать достаточно информации, чтобы сложить в уме схему, как работают CSS-гриды, и начать верстать на них.

Знакомство с CSS Grid Layout

Перевод статьи Getting to know CSS Grid Layout с сайта cm.engineering для CSS-live.ru, автор — Крис Райт

ciu-grid

Фотографии из  Unsplash

CSS Grid — важнейшее событие для веб-раскладки, что случалось в браузерах со времен флексбоксов. Он позволяет избежать всяких магических чисел, хаков и обходных путей, к которым мы привыкли за последние 15 лет. С ним стало намного проще описывать раскладки, что здорово урежет нишу большинства ведущих CSS-фреймворков и позволит писать меньше стилей.

Если не знакомы с CSS Grid и дочитали аж досюда, то это инструмент для раскладки, применяемый к контейнеру, который затем управляет размещением, размерами и выравниванием дочерних элементов.

CSS Grid предоставляет новые мощные возможности — с ними раскладка учитывает горизонтальное и вертикальное пространство одновременно, можно смело изменять раскладку, не затрагивая разметку, и не нужно медиазапросов, чтобы адаптироваться к свободному пространству.