Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout

CSS Grid Layout: Быстрый старт

by
Read Time:4 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

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

Ваш браузер

CSS Grid Layout (известный своим друзьям как «Grid») находится в стадии разработки и пока что поддержка браузеров для него довольно слабая. Чтобы начать использовать это сейчас, вам либо нужно будет использовать IE11 (хотя он использует более старую версию спецификации), Microsoft Edge, Chrome Canary или Firefox Nightly.

Пожалуй, проще всего включить функции Экспериментальной веб-платформы в Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Experimental Web Platform features in Google ChromeExperimental Web Platform features in Google ChromeExperimental Web Platform features in Google Chrome
Нажмите сюда

Настройка сетки

Сетка позволяет нам размещать элементы на странице в соответствии с участками, созданными направляющими.

Терминология

Проще говоря, эти направляющие или линии сетки, образуют горизонтальные и вертикальные направляющие сетки. Дорожки сетки служат рядами и столбцами, между которыми расположены отступы (gutters). Там, где пересекаются горизонтальные и вертикальные дорожки сетки, получаются ячейки, так же как в таблицах. Все эти важные термины нужно понимать.

На изображении ниже вы увидите демонстрационную сетку, показывающую:

  1. линии сетки
  2. столбцы
  3. строки
  4. ячейки
A basic grid highlighting grid lines columns rows and cells
Базовая сетка, выделяющая линии сетки, столбцы, строки и ячейки

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

  1. отступы
Та же сетка, но на этот раз имеющая поразительное сходство с финским флагом

Нам нужно прояснить один последний термин, прежде чем двигаться дальше:

  1. область сетки
A grid area
Одна из множества возможных областей сетки в нашей демо-сетке

Область сетки — это любая часть нашей сетки, огороженная четырьмя линиями сетки; может содержать любое количество ячеек сетки.

Пора строить эту сетку в браузере! Начнем с разметки.

Разметка сетки

Чтобы воссоздать сетку выше, нам нужен элемент контейнера; все, как ты любишь:

В нем мы собираемся разместить девять дочерних элементов.

Создайте форк этого начального pen’а, если хотите продолжать вместе. Я добавил несколько базовых стилей, чтобы визуально отличать каждый элемент сетки.

Правила сетки

Во-первых, мы должны объявить, что наш элемент контейнера является сеткой, используя новое значение свойства display:

Правильно, это было легко. Затем мы должны задать нашу сетку, указав, сколько дорожек сетки она будет иметь, как по горизонтали, так и по вертикали. Мы делаем это с помощью свойств grid-template-columns и grid-template-rows:

Вы увидите пять значений для каждого. Значения для столбцов grid-template-columns указывают, что «первый столбец должен быть 150px в ширину, второй 20px в ширину, третий в 150px» и т.д. для пяти столбцов, более или менее соответствующих нашему изображению финского флага. Пять значений для grid-template-rows содержат нечто подобное. Каждый из них будет auto по умолчанию, принимая высоту от содержимого, но мы хотим быть более точными с нашими отступами, давая им высоту 20px, поэтому нам нужно перечислить все пять рядов.

Каждому из наших элементов автоматически присвоена область сетки в хронологическом порядке. Не плохо, но что случилось с пунктами 2, 4 и 7? Они попали в вертикальные отступы, потому что наши отступы — вполне законные дорожки сетки и, если мы не будем более конкретными, именно эти их расположения в сетке будет принадлежать этим пунктам. Пришло время добавить некоторые правила для наших элементов.

Правила элементов

Синтаксис, доступный нам в данный момент, может быть довольно сложным, но мы сделаем всё как можно проще, используя то, что на самом деле является сокращенным свойством. Мы начнем с нашего первого пункта, указав, что мы хотим, чтобы он начинался с grid-column 1 и grid-row 1:

Наш элемент автоматически заполнит минимальное свободное пространство между линиями сетки. Наш второй пункт немного менее очевиден. Мы также хотим, чтобы он начинался с grid-row 1, но мы хотим, чтобы он пропустил grid-column 2 и вместо этого начал в grid-column 3. Столбец 2 останется пустым, чтобы сформировать наш отступ.

Продолжаем в том же духе, перескакивая через наши отступы столбцов и рядов, заканчивая, наконец, нашим девятым пунктом:

Вывод

Вот и все, вы работаете с сеткой! Напомним четыре основных этапа:

  1. Создать элемент контейнера и задать ему display: grid;.
  2. Используйте этот же контейнер для определения дорожек сетки с помощью свойств grid-template-columns и grid-template-rows.
  3. Поместите дочерние элементы в контейнер.
  4. Укажите, где каждый дочерний элемент находится в сетке, указав его grid-column и grid-row.

В следующей части этой серии мы глубже разберем синтаксис сетки, улучший способ определения наших отступов, изучим гибкие макеты, единицу fr, функцию repeat() и продолжим работу с нашей простой сеткой. Увидимся там!

Полезные ресурсы по Grid

  • @rachelandrew следуйте Рэйчел Эндрю и вы не прогадаете.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.