Grid Template Layout шпаргалка: адаптивная верстка

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

Буквально в одном приложении отойду немного от темы: это первый мой пост на блоге. Я решил начать его из Grid Template layout, а все из-за того какие возможности предоставляет эта вещь. Не буду скрывать и того, что это достаточно актуальная тема на сегодня.

Не все верстальщики пользуются нею, некоторые возможно даже и не знают что так можно, но если тебе интересно то дальше будет еще интереснее — поехали.

Как сделать простую Grid сетку

Те кто еще не использует при верстке scss, я очень рекомендую все-таки освоить эту технологию. 

Итак, что мы видим:

  1. Небольшой блок div, в котором находится 9 эдементов
  2. Все 9 элементов выстроились в сетку 3х3, но если добавить еще один элемент, то он перенесется на следующую строку.
  3. Такую сетку очень удобно использовать при создании ленты новостей или информационных блоков.
  4. Огромный преимуществом как по мне является малое количество кода.

В моем примере я задал свойству grid-template-columns три раза 100px, при верстке я бы смело задал 33%, и получил бы резиновую сетку, которая при изменении размера окна браузера (или размера дисплея) будет менять свой размер.

Мы пойдем еще немного дальше и сделаем более красивую сетку для новостей и сделаем один блок (не важно какой, но будет первый) на две по высоте и ширине клетки нашей сетки.

Понятно, что настолько огромная новость в новостной сетке мало кому понадобится, а я ее задал лишь как пример, но если вы оставите лишь grid-column с его свойствами 1/span 2, а grid-row: 1/span 1 (можно и не задавать), то блок будет меньше по высоте, а значит сколько интересных возможностей открывается с такой небольшой мелочью.

Управление Grid layout сеткой

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

Немного другим способом так как использовал grid-column-start вместо grid-column, но в целом получилось похоже, и очень удобно. Для того, чтобы создать подобное без Grid бокса в прошлом мне бы пришлось немного попотеть и написать тонну лишнего css кода, а потом оптимизировать этот css.

На начале меня всегда интересовало почему если у меня сетка 3х3 или 4х4, то при использовании grid-column-startgrid-column-end все-равно приходилось использовать на одно число больше. 

Обратите внимание, сетка 3х3 а я задал стартовую точку 1 и конечную 4. Все дело в том, здесь нужно в буквальном понимании слова задавать стартовую и конечную точку. Более детально на скрине:

grid template сетка

Надеюсь так понятно. Но сначала мне из-за того, что я не понимал как это работает, было очень сложно использовать grid-colunm-start и grid-colunm-end, а все потому что не понимал как это работает.  

Делаем сетку сайта с помощью Grid layout (grid-template)

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

Что я имею ввиду под сеткой целого шаблона:

  • Header;
  • Adv-block1
  • Content block;
  • Sidebar;
  • Adv-block2
  • Footer;

Но сделаю я с помощью grid-area, где мы можем задавать имена элементам и давать им размеры, что делает сам процесс построения каркаса еще более простым.

Собственно взгляните на результат — это превосходный пример того как я использую grid-template на практике. Если вы обратите внимание на тот момент, в котором я сначала поставил adv block 1, в начале html кода, а после вывел его в конце макета.

Так же важным моментом то как я расположил sidebar взяв одну ячейку у adv-block чем сделав sidebar больше, а значит мы сможем поставить туда немного больше информации.

Причем все это вполне адаптивное и если вдруг вы решите использовать совмещая это все вместе с flex-box, то получится очень даже крутой шаблон.

Следующий пример по факту еще раз показывает, что Grid верстка очень сильный инструмент, за который даже верстальщик скажет вам спасибо, так как весь важный контент вы можете хранить в самом начале html страницы:

Да пример практически не изменился, я лишь добавил «блок поиска», но сделал я это в конце контента, а выводится он в том месте где мне это нужно. С одной стороны мелочь, но Seo-оптимизатор вам скажет только спасибо.

А теперь представьте этот инструмент вместе с использованием media запросов. Получается, что то, что казалось раньше невозможным, сегодня одна строчка кода. Если кто-то более менее уже верстает, вспомните ситуацию (если была такая) когда вам предоставляли шаблоны в которых мобильная версия и desctop версия отличались так будто их рисовали два разных человека.  

В будущем я планирую выложить целую серию уроков, в которых мы вместе будем верстать целую страницу, а после целый шаблон и использованием таких технологий  как grid-layout, flex-box причем вместе с scss и его возможностями, а так же javascript и jquery (планирую выставлять два одинаковых кода на разных технологиях).

На этом все, если этот пост о Grid template layout был полезный тебе, ставь лайки не ленись делиться этим постом среди своих друзей, а я буду стараться выкладывать максимум полезной и практической информации. 

Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Оставьте комментарий