CSS-live.ru

Статьи и новости по запросу: «css grid»

Убираем сдвиги в верстке наложением в CSS Grid

3

Перевод статьи Prevent layout shifts with CSS grid stacks с сайта www.hsablonniere.com для css-live.ru, автор — Юбер Саблоньер

Люди используют CSS Grid по двум причинам:

  1. CSS — это потрясающе! Факт, как ни крути.
  2. Гриды — отличный инструмент для создания сложных двумерных макетов.

У меня иногда бывает третья причина использовать CSS Grid: предотвратить сдвиги в верстке. Я пытался придумать для этого приема прикольное сокращение, но у меня получилось лишь АСПНГ: «АнтиСдвиговый Прием с Наложением в Гридах». Вряд ли у меня получится похвастаться мастерством в «изобретении технических терминов» в резюме на LinkedIn, так что жду ваших предложений получше.

Давайте я объясню прием на реальных примерах. В этой статье я покажу:

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

Погодите, о каких вообще сдвигах идет речь?

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

3

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

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

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

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

3

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

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

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

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

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

2

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

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

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

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

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

Приступим!

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

62

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

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

15

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

ciu-grid

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

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

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

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

CSS Grid на практике: добавляем гриды к существующему дизайну

0

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

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

CSS Grid Layout и позиционированные элементы

3

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

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

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

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

Мысли вслух о подсетках в CSS Grid Layout

2

Перевод статьи 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 (Серхио, Хави и я) договорились о встрече для рассмотрения функции подсеток. Вот наши первые соображения об этом и первое черновое предложение насчет возможной реализации.

Подробно о размещении элементов в грид-раскладке (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.

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

0

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

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

0

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

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

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

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

4

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

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

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

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

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