Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

CSS Grid – CSS разметка

Воу, воу, воу – мы приближаемся к невероятным изменениям. В браузерах появится CSS разметка. Казалось бы – что мы там не видели? Ан нет, ничего мы там не видели! И для затравки немного синтаксиса:

css-grid-example

Наверное, это пример не дает общей картины, давайте посмотрим визуально. Итак, у нас есть вот такой код:

Новый css-grid позволит получить следующий результат:

css-grid-example-01

Думаю, что не сложно увидеть, что при данной разметке нет возможности добиться такого результата в нынешней версии CSS. А вот в новом CSS Grid – пожалуйста:

Ну и конечно живой пример, который у вас работать не будет (как все же его запустить написано ниже):

See the Pen Grid by Example 9: The repeat keyword by Artem Demo (@artemdemo) on CodePen.

Пока никем официально не поддерживается (caniuse: css grid), но в хроме можно включить через экспериментальные настройки: chrome://flags/ и активировать флаг “Experimental Web Platform features”. Разумеется на свой страх и риск и все такое.

what-a-time-to-be-alive

Ссылки по теме:
A Complete Guide to Grid
Grid by Example

Поделиться:
comments powered by Disqus