В стародавние времена (некоторые и сегодня так делают) для создания сайтов веб-разработчики использовали таблицы. Позже их свергли float и flexbox. Уже совсем скоро снова наступит новая революция, ведь из тени выходит CSS GRID Layout. CSS GRID Layout это новый взгляд на адаптивную верстку. Теперь не нужно будет мучиться с раскладкой и медиазапросами. Но несмотря на все это разработчики до сих пор не спешат его использовать. Но почему?

Что такое Grid Layout?

CSS Grid Layout представляет собой сетку, в которую помещаются все вложенные в нее блоки. Сетка, в отличие от flexbox, применяется на сам объект и на объекты внутри него.

Разработчики всегда выбирали CSS для разметки страницы, но он никогда не делал свою работу хорошо. Всегда не хватало нормального инструмента или набора инструментов с помощью которых стала бы возможно быстрая и удобная разметка. Grid заполняет недостаток в инструментарии и помогает там, где не справляются flexbox’ы и inline-block’и., например, с помощью Grid можно в несколько строк кода переделать всю разметку при изменении разрешения экрана.

Технология поддерживается почти во всех современных браузерах. В Google Chrome и Safari поддержка есть и в мобильных версиях браузера. Internet Explorer отличается более строгими требованиями к синтаксису и до сих пор полностью не поддерживает Grid.

Выделяют несколько причин того, почему мало кто использует CSS Grid Layout в своих проектах:

  • Многие просто не понимают, что такое Grid и как с ним работать. Множество слухов о данном инструменте мешают разобраться в нем.
  • Разработчики не знают где применять Grid в поставленных задачах.
  • Спецификации все еще находятся в состоянии Candidate Recommendation.
  • Отсутствие спецификации второго уровня.

Спецификации

Впервые спецификации для CSS Grid Layout появились еще в далеком 2012 году. В 2017 году браузеры массово стали внедрять эту технологию. Хотя спецификация и находится в статусе Candidate Recommendation, она работает довольно стабильно, так как функционал добавили гораздо раньше, чем вышла первая спецификация.

Второй уровень спецификации для Grid сейчас находится в состоянии черновика, но уже доступна первая публикация.

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

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

С Internet Explorer всегда все непросто. На самом деле именно Microsoft выпустили первую спецификацию в далеком 2012 году. С тех пор Grid претерпел множество изменений, были изменены и добавлены многие функции, а IE все еще работает на старой версии. Так что для работы во всех браузерах требуется проставлять специальные префиксы.

Grid Layout уже совсем скоро перевернет всю front-end разработку и станет незаменимым инструментом.