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

Лакомые кусочки 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 не может похвастаться таким арсеналом.

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

(далее…)