CSS-live.ru

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

Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)

27

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

Полный обзор разных методов позиционирования элементов, предлагаемых спецификацией CSS Grid Layout.

В последние месяцы в рамках моей работы в Igalia я сосредоточенно доделывал те новые/пропущенные места в реализации CSS Grid Layout в движке Blink, что относились к размещению элементов. Вкратце, работа в основном велась по 2 направлениям:

  • Поддержка неявного грида перед явным. Так, чтобы к гриду можно было добавлять полосы не только в направлении заполнения (обычно справа/снизу), но и с противоположной стороны.
  • Правильная интерпретация неизвестных именованных грид-линий. Это случай, когда элемент привязывается к линии под названием «foo», но нигде в гриде нет линий с таким именем.

Эти задачи могут показаться простыми, но из них вытекало немало изменений в реализации самого механизма. Ради их завершения мне в итоге пришлось чуть ли не переписать весь код нахождения позиций в гриде. Я даже написал документ с пояснением всего плана и всех технических подробностей, где можно найти ссылки на все соответствующие патчи.

Теперь, когда я всё это доделал, самое время объяснить, как им пользоваться. Хотя мой коллега Серхио уже писал об этом в 2014-м, спецификация с тех пор поменялась, так что, думаю, лучше попытаться объяснить всё целиком с нуля. Эта статья — что-то вроде выжимки с примерами из раздела «Размещение грид-элементов» спецификации CSS Grid Layout.

Золотая рыбка CSS3 Grid Layout (часть 3)

4

Благодаря нашим недавним погружениям в волшебный мир этого модуля, мы уже смогли прочувствовать его силу и невероятные возможности, которыми он наделён. Но, несмотря на множество примеров и описаний разделов CSS Grid Layout Module Level 1, есть ещё немало сюрпризов, о которых стоит поговорить. Поэтому, как вы уже догадались, в этой статье мы продолжим прогулку по этой спецификации, ведь золотая рыбка задолжала нам ещё желания;)

Кстати, так совпало, что параллельно с нами Эмиль Бьёрклунд также ведёт свою серию статей, посвящённую спецификации Grid Layout. Поэтому, чтобы лучше прояснить для себя механизм этой раскладки, мы настоятельно рекомендуем ознакомиться со статьями Эмиля. Для этого можно пройти к нему в гости, либо прочитать перевод у нас на сайте.

Пожалуй, начнём…

Подсетки в Grid Layout жизненно важны

2

Перевод статьи Subgrids Considered Essential с сайта meyerweb.com для css-live.ru. Автор — Эрик Мейер.

Модуль Grid layout — невероятно фантастическая штука. Я познакомился с ним подробно во время написания главы про грид-раскладку в четвёртом издании своей книги «CSS: полное руководство», и он позволяет вытворять с раскладками такое, что нам даже не снилось. И, кажется, я понял одну недостающую деталь — мощь и необходимость подсеток.

В подтверждение моих слов, рассмотрим пример, который можно наблюдать в различных формах на этой тестовой странице. Я практически целиком содрал этот пример у Fantasai, но разберу его немного иначе. За основу возьмём форму с разными полями и метками, находящимися в неупорядоченном списке, чтобы позаботиться о доступности и, в принципе, для чтения и удобства, если вдруг CSS не отобразится. Разметка выглядит так:

CSS Grid Layout включен по умолчанию в Firefox 45.0a1

0

В ноябре Firefox (ночные сборки, на сегодня это версия 45.0a1) стал первым браузером, в котором нынешняя версия CSS Grid Layout включена по умолчанию. Можно скачать, установить, запустить и сразу проверять примеры из наших статей, не «колдуя» в настройках. Похоже, разработчики Firefox всерьез решили выпустить 45-ю версию с полноценной поддержкой Grid — количество свежезакрытых багов по этой теме впечатляет. Уже 14 декабря эта версия перейдет в статус альфы, а там всего 3 месяца — и релиз. ВеCSSна обещает быть жаркой! :)

Лакомые кускочки Grid-раскладки, часть 3: размеры грид-полос

5

Перевод статьи Grid Tidbits part 3: grid track sizing с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

В этой заметке исследуются некоторые тонкости задания размеров грид-полос (иначе — рядов и колонок) в CSS Grid Layout. Гибкие размеры, функция повторения, функция minmax — вот это да!

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

Чтобы экспериментировать с примерами из этой заметки, рекомендую скачать и запустить Chrome Canary, поскольку в этом браузере самая актуальная реализация.

CSS Grid Layout — на финишной прямой

0

На прошлой неделе Рабочая группа CSS в W3C объявила о намерении уже этой осенью перевести спецификацию CSS Grid Layout 1 в статус кандидата в рекомендации — т.е. фактически стандарта, полностью готового к реализации без префиксов и флагов. Все оставшиеся непроработанными спорные моменты нужно «утрясти» не больше чем за месяц. Поэтому Рабочая группа CSS призывает всех интересующихся поскорее ознакомиться с текущим вариантом и поучаствовать в его обсуждении.

…Мы хотим, чтобы все были довольны, но этого не получится, если вы начнете жаловаться после того, как мы закончим и все уже выпустят свои реализации, а вы соблаговолите сказать нам, что вам что-то не нравится, лишь через пару лет, так ведь? Так что посмотрите сейчас, и лучше жалуйтесь раньше, а не позже. :)

В числе моментов, которые особенно важно обсудить сейчас — свойства row-gap и column-gap и их влияние на общую ширину грид-полос, уточнение автоматического определения размера полос, добавление возможности распределения контента по аналогии с флексбоксами, а также масса небольших уточнений. Всё это нужно прояснить и проработать до осени! Особенно значимы для W3C комментарии от веб-разработчиков — ведь именно им в первую очередь нужен двумерный механизм раскладки. Так что, если не хотите терпеть неудобства от стандарта потом, скорее знакомьтесь с текущей версией (напр. по статьям на нашем сайте), смело экспериментируйте с ней и помогите сделать стандарт удобным!

Лакомые кусочки Grid-раскладки, часть 2: основы и терминология

12

Перевод статьи Grid Tidbits part 2: terminology and basics с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

В этой статье мы познакомимся с терминологией «CSS Grid Layout», основами определения grid-шаблонов и размещения в них элементов.

Это вторая из цикла относительно небольших статей про «Grid Layout». В первой части мы узнали о назначении grid-ов и о текущей ситуации в браузерах.

Для этого «лакомого кусочка» мы сделаем следующее:

  • Возьмём элемент и превратим его в grid.
  • Увидим, как элементы сами размещаются в grid’е
  • Поупражняемся в том, как управлять этим размещением

Лакомые кусочки Grid-раскладки, часть 1: зачем и почему

6

Перевод статьи Grid tidbits, part 1: the Why and Where с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

CSS Grid Layout — новый способ управления раскладкой в браузере. У него и других модулей (например, flexbox) разные возможности и перспективы, но в чем-то они и перекрываются. Да, и совсем скоро он появится во многих браузерах.  В этой статье мы узнаем, что это за модуль и для чего он нужен.

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

Статьи предполагают по крайней мере базовые знания CSS-раскладки, в том числе Flexbox.

Золотая рыбка CSS3 Grid Layout (часть 2)

6

В прошлой статье золотая рыбка Grid Layout выполнила для нас множество прекрасных желаний, но тем не менее, это далеко не всё, на что она способна. При помощи волшебства Grid Layout можно творить такие вещи, для которых раньше нам бы понадобилось куча «костылей» и хаков, либо исключительно JavaScript.

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

Золотая рыбка CSS3 Grid Layout (часть 1)

14

После написания моей недавней статьи про плотную упаковку блоков я всё-таки не смог удержаться от соблазна более подробно познакомиться со спецификацией CSS Grid Layout Module Level 1, и меня удивило, почему я раньше не обращал на неё внимание. Поэтому в виде заслуженного наказания я решил написать о ней эту статью.

Возможно многие из вас уже задавали себе вопрос, что делает в названии статьи фраза «Золотая рыбка» и как это связано со спецификацией CSS Grid Layout? Дело в том, что по мере изучения этого модуля я пришёл к мнению, что это настолько мощный и невероятно гибкий механизм, что, как и золотая рыбка, он может выполнить любое ваше желание. Даже модный Flexbox не может похвастаться таким арсеналом.

Вот список некоторых возможностей этого модуля: