Архив тегов: CSS3 Grid Layout

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

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

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

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

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

(далее…)

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

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

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

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

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

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

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

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

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

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

(далее…)

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

Перевод статьи 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)

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

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

(далее…)

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

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

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

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

(далее…)