CSS Grid: верстка макета разными способами

Автор: Geoff Graham    Источник: css-tricks.com
13.03.2017
865
0
img

Я был реально рад познакомиться с CSS Grid. Эта технология уже появляется в браузерах и, похоже, что вскоре, мы сможем использовать её в продакшине.

Но одна вещь в CSS Grid выделяется для меня особенно – это гибкий синтаксис. Чтобы продемонстрировать это, мы рассмотрим, как можно создать один и тот же макет тремя разными способами, используя свойства CSS Grid. В частности, мы будем использовать макет «Holy Grail layout» как пример:

Для начала мы определим родительский элемент, который называется .grid, и зададим три колонки и три ряда – сцена для разных методов создания макета.

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
}

Согласно коду выше, .grid имеет три колонки (две по 150px и одна резиновая, занимающая все оставшееся пространство) и три ряда (все по 100px для демонстрации результата).

Также в каждом примере мы поиграем со следующими дочерними элементами: header, footer, sidebar-left, sidebar-right и article. Они будут строительными блоками нашего макета и будут выглядеть в HTML следующим образом:

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>
  
  <footer>
    Footer
  </footer>
</div>

Отлично, давайте с помощью CSS Grid сделаем этот макет тремя способами!

Метод 1: Определение колонок

Мы можем задать, какие ячейки грида будет занимать каждый из дочерних элементов:

header {
  /* Start on Row 1 */
  grid-row: 1;
  /* Start on the first column line and extend all the to the last column line */
  grid-column: 1 / 4;
}

.sidebar-left {
  /* Start on Row 2 */
  grid-row: 2;
  /* Start on the first column line and stop at the next column line */
  grid-column: 1 / 2;
}

article {
  /* Start on Row 2 */
  grid-row: 2;
  /* Start on the second column line and stop at the third column line */
  grid-column: 2 / 3;
}

.sidebar-right {
  /* Start on Row 2 */
  grid-row: 2;
  /* Start on the third column line and stop at the last column line */
  grid-column: 3 / 4;
}

footer {
  /* Start on Row 3, the last row */
  grid-row: 3;
  /* Start on the first column line and extend all the to the last column line */
  grid-column: 1 / 4;
}

Это все, что нам нужно для создания макета! Однако, можно сделать лучше, так что давайте двигаться вперед.

Метод 2: Сокращенный вариант первого метода

CSS Grid достаточно умный, чтобы рассчитать, где будут находиться сайбары и статья, если мы укажем, где будут header и footer:

header, footer {
  grid-column: 1 / 4;
}

Вот и все! Как только мы укажем, что и header и footer занимают всю ширину родителя, то все остальные элементы CSS Grid расставит сам, и для этого не нужно больше ничего делать. Круто!

Метод 3: Задание шаблонных областей

CSS Grid, используя свойство grid-area, позволяет давать названия элементам, а с помощью свойства grid-template-areas располагать их внутри родительского элемента.

Давайте назовем наши дочерние элементы:

header {
  grid-area: header;
}

footer {
  grid-area: footer;
}

.sidebar-left {
  grid-area: sidebar-1;
}

article {
  grid-area: article;
}

.sidebar-right {
  grid-area: sidebar-2;
}

А теперь расположим их внутри родительского элемента с помощью свойства grid-template-areas:

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
  grid-template-areas: "header header header"
                       "sidebar-1 article sidebar-2"
                       "footer footer footer";
}

Посмотрите, как можно создать макет, используя имена областей как значения свойства. Это почти что визуальный редактор прямо в коде!

Выводы

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

А что же на счет других способов создания макета Holy Grail, которые мы не рассмотрели? Пишите комментарии и присылайте свои варианты, мы будем рады добавить их.

ПОХОЖИЕ СТАТЬИ: