От автора: пару минут назад я прочитал пост на Designer News. Пост написал парень, который хочет создать очередной CSS grid фреймворк, основанный на flexbox. Скорее всего, он знает, что таких фреймворков уже полно в сети, но это не удержало его от того, чтобы узнать, что по этому поводу думают другие.
Причиной этому, скорее всего, послужило то, что человек просто любит кодить, а также понимает, что действительно крутых grid фреймворков достаточно мало. Я считаю этой неплохой идеей создать еще один фреймворк, потому что я хочу, чтобы у людей оставалась мотивация для осуществления своих идей (не важно, сколько разработчиков уже проделали то же самое). НО только если все это делается с целью обучения, а не для кого-то.
Почему так? Потому что в скором будущем эти фреймворки вообще не будут нужны. Это может прозвучать странно, но ниже я все объясню:
Я не знаю, чем пользуетесь вы, но вот уже пару лет я использую только grid фреймворки для выравнивания контента и создания отзывчивых макетов верстки. Со временем пара аспектов изначальной идеи сайтостроения изменились: веб-сайты теперь, в основном, проектируются в первую очередь под мобильные устройства (к счастью). Flexbox с его свойствами позволяет достигать поставленных задач по созданию эффективных CSS-макетов намного быстрее. К примеру, отдельные свойства flexbox помогают выравнивать высоты колонок, построенных в ряд, не зная размеров контента, что можно заменить на код JS.
До сих пор данный способ был чуть ли не лучшим для создания надежных макетов (без написания пользовательской grid, естественно). К счастью, теперь нам стало намного легче, благодаря grid.
Что же в нем такого хорошего
По существу, это новый CSS метод, который позволяет создавать красивые макеты сайтов без использования огромных grid фреймворков. Grid предоставляет вам доступ к множеству свойств, которые подсказывают браузеру как позиционировать элемент на странице, и не важно какой бюджет у клиента, и насколько сжаты сроки выполнения.
Самое удивительное в том, что браузер вообще не волнует расположение элемента в HTML коде. Например, колонка, которую вы хотите отобразить в верхнем правом углу окна, может находиться прямо перед закрывающим тегом body (после всех остальных тегов).
Это чем-то похоже на действие position: absolute, но без необходимости прописывать позиционирование элемента попиксельно. Grid сама просчитает это – W3C описывает такое поведение, как независимость порядка в исходном коде (source-order independence).
Поддержка браузеров
Так как технология еще нова, в данный момент только один браузер поддерживает эту технологию по умолчанию: вы не поверите, но… не могу не смеяться… ладно, это всеми любимый друг Internet Explorer. Но не беспокойтесь, все не так плохо: все еще необходимо использовать –ms префикс. Теперь немного понятнее? Не могу перестать смеяться.
В любом случае, если вы не пользуетесь IE (позор вам), вы можете активировать эту функцию через флаг «экспериментальные возможности веб-платформы» в chrome://flags для браузеров Chrome и Opera.
Так что, это альтернатива flexbox?
НЕТ! Только не начните бегать по офису и кричать «Нафиг ваш flexbox», ОН ВСЕ ЕЩЕ НУЖЕН!
Данные два свойства используются в совершенно разных случаях. Первое display: grid можно использовать для создания основного макета верстки вашего веб-приложения или сайта, но не для выравнивания боксов с контентом. В этом случае вам поможет display: flex. Используется, к примеру, для выравнивания высоты колонок, стоящих в один ряд. Подведем итог. Какое свойство для чего использовать:
Grid: — для макета
Flex: — для контента
Достаточно просто, не правда ли?
И чего же вы ждете? Открывайте Chrome, включайте флаг экспериментальных возможностей и тестируйте grid! Если вы запутались или просто хотите больше узнать о том, как точно работают эти свойства и как их использовать, загляните в документацию W3C.
Нам всем следует принимать участие в развитии этих свойств, так как существует гораздо больше неизученных случаев их использования. Я думаю, это на самом деле огромный шаг к миру, свободному от громоздких и пожирающих много оперативной памяти CSS фреймворков.
Источник: www.leo.github.io
Редакция: Команда webformyself.
Комментарии (1)