Основы CSS Grid

Автор: Robin Rendle    Источник: css-tricks.com
05.10.2017
951
0
img

Это была супер неделя для front-end разработчиков –в последних версиях Firefox и Chrome был запущен CSS Grid без дополнительных флажков. Да-да, теперь мы можем поиграть с гридом в двух (на момент написания статьи) самых популярных браузерах.

Но что в нем такого и почему это должно нас волновать?

CSS Grid – это первая реальная система разметки. Она позволяет организовывать контент и по колонкам и по рядам и, в конце концов, дает разработчикам практически безграничный контроль. Это значит, что наконец-то можно забыть про десятилетия хаков и обходных путей – сложные разметки и красиво скомпонованные страницы сейчас не только реальны, но и легко реализуемы.

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

ОК, но как он работает? В нем очень много туториалов с множеством деталей, но я думаю, что стоит начать с основ. Давайте попробуем реализовать относительно простой пример с буквами алфавита.

Для начала добавим разметку:

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
</div>

Теперь добавим стили для букв, установим размер шрифта, цвет и отцентрируем их внутри блоков с помощью flexbox свойств, таких как align-items и justify-content. Именно так! CSS Grid не заменяет свойства flexbox, а скорее дополняет их. Можно даже использовать их свойства одновременно. Но давайте вернемся к примеру:

В примере выше мы получили два простых блока, расположенных друг под другом, так как по умолчанию их свойства display имеют значения block. А теперь укажем родительскому элементу использовать Grid разметку:

.wrapper {
  display: grid;
}

И получим вот это:

Как видите, ничего не изменилось. В отличии от display: inline-block; или display: inline;, не совсем понятно, что происходит, когда display имеет значение grid. На самом деле, для того, чтобы grid начал что-то делать, нужно указать количество колонок и рядов. В данном примере мы просто выровняем буквы в одну линию в 2 колонках:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1px;
  background-color: black;
}

Давайте разберем новые строчки кода. Сначала мы создаем две колонки с помощью свойства grid-template-columns. Значение 1fr может показаться очень странным, если вы не видели его раньше, но это валидная единица CSS, которая велит колонкам занять по 1 фракции грида. В данном случае это означает, что колонки будут одинаковые по ширине.

В итоге все будет выглядеть примерно так:

Ура! Работает! Но видите этот странный зазор между колонками? Это выглядывает фон родительского контейнера, потому что мы задали свойству grid-column-gap значение 1px. Обычно мы используем большие расстояния между колонками, особенно, если выравниваем текстовые блоки, но в данном случае одного пикселя будет достаточно.

А что случится, если мы добавим еще две буквы? Как это изменит разметку?

<div class='wrapper'>
  <div class='letter'>
    A
  </div>
  <div class='letter'>
    B
  </div>
  <div class='letter'>
    C
  </div>
  <div class='letter'>
    D
  </div>
</div>

Технически это никак не меняет разметку – мы уже задали гриду две колонки, потому новые буквы станут точно под старыми и будут занимать по ширине ровно 1 фракцию:

Но вот что странно – почему нет зазора между буквами A и C или B и D? Дело в том, что grid-column-gap работает только с колонками, а мы создали еще один ряд. Нужно применить свойство grid-row-gap:

.wrapper {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  /* other styles go here */
  /* we could have also used the shorthand `grid-gap` */
}

Вот как это выглядит:

Мы создали наш первый грид. У нас есть и ряды и колонки и все, что нужно было для этого сделать – поменять разметку. Давайте поэкспериментируем с колонками еще немного. Что будет, если задать свойству grid-template-columns другое значение? Например, такое:

.wrapper {
 grid-template-columns: 1fr 1fr 1fr;
}

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

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

.wrapper {
 grid-template-columns: 3fr 1fr 1fr;
}

Как и ожидалось, колонки А и D будут больше других:

Разве не круто? Больше не нужно беспокоиться о значениях margin или подбирать идеальный процентный размер колонок, чтобы все выровнять. Можно создать супер сложный грид без необходимости выполнять какие-либо расчеты, как это было раньше. Все, что нужно это добавить новое значение свойству grid-template-columns и вуаля, появляется новая колонка!

А как на счет адаптивности, спросите вы? Все просто, нужно внутри media query поменять свойство grid-template-columns. Допустим, мы хотим, чтобы по умолчанию было 2 колонки, для ширины 500px – три колонки, а на большом экране 4 колонки. Вот все, что для этого нужно написать:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  @media screen and (min-width: 500px) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  @media screen and (min-width: 800px) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Откройте это демо в новой вкладке, измените размер вьюпорта и посмотрите, как происходит магия!

Свойство grid-template-columns гораздо сложнее, чем я показал, но это отличная стартовая точка. Далее рассмотрим по-настоящему меняющее жизнь свойство CSS Grid: grid-template-rows. С помощью небольшого кода ниже и уже полученных знаний о гриде, давайте выясним, что делает это свойство:

.wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  grid-template-rows: 1fr 3fr;
}

Вместо ширины колонок новое свойство задает высоту рядам. У нас есть 2 ряда, последнее значение равно 3fr, это значит, что второй ряд всегда будет в три раза выше первого:

Выглядит довольно просто. Никогда раньше мы не могли делать ничего подобного. Мы всегда писали какие-то хаки, например, задавали минимальную высоту конкретного элемента или меняли класс, но никогда не создавали подобную связь между рядами. Именно это и делает грид таким сильным.

С этим небольшим набором знаний мы можем создавать удивительно сложные макеты – ассиметричные и адаптивные гриды станут их частью. Мы всего лишь мельком взглянули на огромную спецификацию CSS Grid, в ней еще очень много интересного. Но думаю, что Джен Саймонс описала это лучше:

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

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

Мы должны не только выучить новые свойства, но и переосмыслить все, что знали раньше. CSS Grid – не просто спецификация, но и целая философия. Давайте открывать ее вместе!

Поддержка браузеров

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

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