Cтатьи по тегу «CSS3 Grid Layout»

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

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

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

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

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

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

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

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

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

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

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

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

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

Март 2017-го года можно с полным правом назвать месяцем CSS-гридов, и не потому, что «астрологи объявили» (хотя мудрые люди действительно предсказывали это заранее:). Трудно вспомнить другой месяц в истории веба, в начале которого одну из самых долгожданных технологий верстки поддерживали бы (без флагов и т.п.) ноль браузеров, а в конце — целых четыре: с 7 марта — Firefox, с 14 — Chrome для десктопов, с 21 — Opera, а с 27 — Safari, десктопный и мобильный! Сhrome для Android с поддержкой CSS Grid вот-вот появится в Google Play, формально он тоже успел выйти в марте. Один Edge пока остался со своей старой и неактуальной реализацией (хотя именно Microsoft, надо отдать им должное, первым хоть как-то реализовал гриды в браузерах), но вряд ли его разработчики смогут отмахнуться от той кучи просьб обновить гриды, что пришла им за эти дни. Добавлено 03.04.2017: так и вышло — статус этого запроса сменился с «В ожидании» на «Мы работаем над этим»!

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

Почти пять лет назад на нашем сайте вышла статья о том, как выстроить некие однотипные блоки (товары в каталоге, фото в галерее…) по сетке, оптимально вписанной в доступное пространство. Сейчас она — одна из самых популярных на сайте, и число ее просмотров всё растет. Ведь актуальность задачи никуда не делась. Самое время вернуться к этой теме и раскрыть ее по-новому.

Перевод статьи Practical CSS Grid: Adding Grid to an Existing Design с сайта alistapart.com для css-live.ru. Автор — Эрик Мейер.

Понять и использовать CSS-гриды проще, чем может показаться. В день, когда вышел Firefox 52 с поддержкой гридов, я на радостях решил переделать основу раскладки моего личного сайта на гридах. И это был очень несложный процесс — пять минут, чтоб написать сами стили для грида, еще 15-20 ушло на отладку.

Если вы освоили флексбоксы (а кто не освоил их за последние два-три года?), для вас давно не проблема отцентрировать что угодно, да и вообще выровнять как угодно. Вам давно знакомы «волшебные» свойства justify-content, align-content, align-items и align-self, и что делает каждое из их значений (не обязательно помнить их все наизусть, ведь всегда можно подсмотреть в шпаргалке или наглядном справочнике:). Но всё ли вы знаете про эти свойства? Что если я скажу вам, что их могущество не ограничено флексбоксами? И что вы видели лишь часть их значений? И что самих этих свойств не 4, а в два с лишним раза больше? Если хотите овладеть всей их мощью, узнать, причем тут новомодная грид-раскладка (CSS Grid Layout), и вас не страшат дебри спецификаций — добро пожаловать в эту статью, где я покажу вам, насколько глубока кроличья нора W3C.

CSS-гриды упомянуты не случайно: лучше сразу вооружитесь одним из браузеров, где они уже работают (Firefox 52+, Chrome 57+, Opera 44+ или Safari 10.1+/iOS 10.3+ Safari), чтобы увидеть примеры во всем их блеске.

Перевод статьи CSS Grid Layout is Here to Stay с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

О том, что стояло за разработкой CSS Grid Layout в Chromium/Blink и Safari/WebKit, которую вела Igalia при поддержке Bloomberg.

Перевод статьи Grid Layout Summertime с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Краткое описание изменений в реализации CSS Grid Layout за прошедшее лето

Лето закончилось, и команда Igalia успела не только хорошо отдохнуть, но и продуктивно поработать над CSS Grid Layout в Chromium/Blink и Safari/WebKit в рамках нашего постоянного сотрудничества с Bloomberg.

К концу сентября спецификация перешла в статус «Кандидат в рекомендации (CR)», Рэйчел Эндрю объяснила, что это значит, в своей статье. Однако, за прошедшие месяцы кое-где произошло несколько изменений, требующих обновления реализации.

Если не забыли моё выступление на последнем BlinkOn, мы рассматривали статус реализации. К тому времени накопилось куча вещей, помеченные как WIP (сокращение от Work In Progress, т.е. «Мы работаем над этим» — прим. перев.) или TODO («надо сделать», напоминания на будущее — прим. перев.), но теперь большинство из них уже реализованы, как я поясню в статье.

Перевод статьи Grid + Flexbox: the best 1-2 punch in web layout с сайта www.chenhuijing.com, опубликован на CSS-live.ru с разрешения автора — Чэнь Хуэй Цзин

Через 5 дней выходит стабильный релиз Firefox 52. Знаете, что это значит? Это значит, что через 5 дней начнут поддерживаться CSS-гриды. А совсем скоро, 14 марта, подтянется Chrome 57, за ним Safari 10.1 и, надеемся, до конца 2017-го присоединится и Edge.

Я вся в предвкушении.

Перевод статьи CSS Grid! с сайта meyerweb.com для css-live.ru, автор — Эрик Мейер

Гриды к нам приходят! Гриды к нам приходят! На самом деле, наконец они появятся в ближайшем браузере! Ураааааа!

Эй, потише там. Что за тарарам?

CSS Grid начнет поддерживаться по дефолту в Chrome и Firefox в марте 2017-го. А именно, Мозилла включит его в Firefox 52, намеченном на 7 марта. Судя по тому, когда Grid включили по дефолту в Chrome Canary, похоже, что Google выпустит его с Chrome 57, намеченным на 14 марта. В обоих случаях, с тех пор как поддержку включат по дефолту в основных релизных каналах — т.е. «вечнозеленых» браузерах, которыми пользуются обычные люди — вся-вся поддержка гридов, что сейчас есть в версиях для разработчиков, станет доступна для всех. Всё гридовое Просто Начнет Работать™^®©.

Эти даты железобетонно гарантированы?

Перевод статьи CSS Grid Layout and positioned items с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

В этой статье мы рассмотрим некоторые особенные возможности позиционированных грид-элементов.

В рамках работы Igalia над CSS Grid Layout в Chromium/Blink и Safari/WebKit, мы реализовали поддержку позиционированных элементов. Да, абсолютное позиционирование в гриде :)

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

Перевод статьи Subgrids thinking out loud с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Итоги наших размышлений о функции подсеток из спецификации CSS Grid Layout.

За последние недели подсетки стали острой темой, в основном из-за статьи «Подсетки в Grid Layout жизненно важны» Эрика Мэйера (кстати, первод есть у нас на сайте — прим. перев.), в которой он привёл несколько примеров того, где подсетки могут оказаться весьма кстати. Эти примеры так или иначе связаны с предыдущей статьёй fantasai на эту же тему. К тому же Рэйчел Эндрю рассказывала про подсетки в своём блоге и в своей последней электронной книге про Grid Layout (что вполне достаточно, чтобы получить представление о синтаксисе и основных функциях грида).

Возможно вы в курсе, что последнее время Igalia работает над реализацией CSS Grid Layout в Chromium/Blink и Safari/WebKit. Как разработчики, мы решили, что неплохо будет поделиться нашим откликом на эту тему, так что на этой неделе команда, работающая над Grid Layout (Серхио, Хави и я) договорились о встрече для рассмотрения функции подсеток. Вот наши первые соображения об этом и первое черновое предложение насчет возможной реализации.