Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Разобравшись с основной терминологией, пришло время создать свою первую сетку. В этом уроке мы создадим простую сетку, которая будет состоять из 12 колонок и 12 строк.

2 Как и в случае с модулемFlex, для создания сетки нам необходимо иметь некий контейнер. Создадим такой контейнер с классомgrid-12.

3 Для того, чтобы превратить секцию вgrid-контейнер, необходимо воспользоваться свойством display со значением grid. Это не даст немедленных видимых результатов. Поэтому добавим внутрь нашего контейнера 3 дочерних элемента. Зададим им различное оформление и на примере этих блоков узнаем, как создать простую сетку.

4 <a>https://codepen.io/hexlet/pen/xxZqBVr</a>

5 Не указав количество колонок и строк, мы получили сетку с тремя строками и одной колонкой. Обычно это не тот результат, который мы ждём от сеток. Если вам нужна именно такая структура, то, возможно, сетки вам не нужны и проще не давать браузеру обрабатывать то, что он мог и не обрабатывать.

6 Другим возможным значением свойства display является inline-grid. Внутри такого контейнера всё будет происходить точно так же, как и при значении grid, но сам контейнер по поведению будет напоминать строчный элемент - он займёт ровно столько пространства, сколько необходимо. Другие элементы в потоке смогут обтекать его при необходимости и наличии свободного пространства.

7 <a>https://codepen.io/hexlet/pen/wvMdJJG</a>

8 <h2>Создание сетки</h2>

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

10 <ul><li>Любые известные вамCSS-единицы. Это могут быть:px,em,remи так далее.</li>

11 <li>min-content. При этом значении ширина колонки будет равняться минимально возможной. Это зависит от контента внутри колонок.</li>

12 <li>max-content. Противоположность предыдущему значению. Ширина колонки будет равняться максимально возможной, с учётом того, какой контент находится в колонках.</li>

13 <li>minmax(min, max). Здесь в качестве значения используется целая функция. Она принимает два значения: минимальный и максимальный размер. То есть мы устанавливаем границы, в пределах которых браузер сам выбирает ширину.</li>

14 <li>auto. Браузер автоматически подстраивает все колонки так, чтобы самый большой элемент в нашей сетке поместился впритык.</li>

15 </ul>Существует ещё несколько важных значений, которые мы разберём чуть ниже.

16 Узнав возможные значения для полосы, возникает вопрос: "А где же указывается конкретное число колонок или строк в сетке?". Дело в том, что оба свойства grid-template-columns и grid-template-rows могут принимать несколько значений, которые разделены пробелом. Каждое такое значение - это размер одной полосы. То есть, для создания сетки с 12 колонками и 12 рядами мы можем по 12 раз указать значения в каждом из свойств.

17 Создадим ровную сетку с квадратными ячейками. Сделаем их по 20 пикселей. Возьмём прошлый пример и добавим новые свойства

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

19 <a>https://codepen.io/hexlet/pen/WNrjpqX</a>

20 Обратите внимание на то, что случилось с элементами внутри сетки. До выставления свойств grid-template-columns и grid-template-rows они занимали всю доступную ширину экрана. Теперь каждый из них занимает ровно одну ячейку. То есть имеет размер 20 пикселей на 20 пикселей. Это очень легко проверить ввеб-инспекторе, например вChrome DevTools. Откройте его и наведите указатель мыши на любой из этих элементов. Вы увидите всю сетку и то, какое место в ней занимает каждый из элементов.

21 Необязательно использовать только одни варианты значений внутри свойств grid-template-columns и grid-template-rows. Для каждой полосы вы можете выставить своё уникальное значение. Например такое:

22 <a>https://codepen.io/hexlet/pen/eYJWWJx</a>

23 Обратите внимание на то, какого размера получились полосы в данном варианте.

24 <h3>Repeat</h3>

25 Указывать каждую колонку отдельно, особенно если они одинаковые - это достаточно скучное дело. Очень легко допустить ошибку и получить не ту сетку, которую ожидали. Чтобы избежать повторения одних и тех же значений, у свойств grid-template-columns и grid-template-rows есть специальное значение repeat. Точнее это функция, которая принимает 2 значения:

26 <ol><li>Сколько раз повторить значение.</li>

27 <li>Какое значение необходимо повторить.</li>

28 </ol>Перепишем нашу 12-колоночную сетку с использованием функции repeat.

29 <a>https://codepen.io/hexlet/pen/BajRRWm</a>

30 Результат не изменился, а кода стало намного меньше и его легче прочитать. Это прекрасно :)

31 Функция repeat является одним из возможных значений свойств grid-template-columns и grid-template-rows. Поэтому её возможно использовать несколько раз, или комбинировать с другими значениями. Предположим, что первые 6 ячеек по вертикали и горизонтали нужны по 20 пикселей, а остальные по 30. ТогдаCSSможет принять следующий вид:

32 Теперь сетка ввеб-инспекторебудет выглядеть следующим образом:

33 Помимо грубого указания количества колонок, которые мы хотим повторить, может использоваться ещё несколько значений:

34 <ul><li>auto-fill. Браузер повторит колонки столько раз, сколько может поместиться. Если контейнер ограничен по ширине, то браузер разместит столько колонок, сколько это возможно без выхода за рамки размера контейнера.</li>

35 <li>auto-fit. Значениеauto-fitпочти полностью повторяет работу значенияauto-fillза одним исключением: если в контейнере осталось свободное пространство после размещения всех колонок и элементов, то браузер автоматически сожмёт все пустые колонки до нуля. По сути, он их выкинет. Освободившееся место займут заполненные колонки.</li>

36 </ul><a>https://codepen.io/hexlet/pen/QWyvvxJ'</a>

37 Обязательно посмотрите на то, как выглядит сетка ввеб-инспекторе. Вы увидите, что при использовании auto-fill получилась сетка размером16x5, тогда как со значением auto-fit сетка3x1. Браузер просто выкинул ненужные колонки, в которых нет никаких элементов.

38 <h3>Фракция</h3>

39 Нет, речь здесь пойдёт не о политике. При созданииCSS Grid Layoutразработчики пытались решить проблему адаптивности. Сейчас адаптировать необходимо любую веб-страницу, если вы заботитесь о пользователях. Как же адаптировать сетку? Можно обойтись относительными единицами измерения, но зачастую этот путь приводит только к большим проблемам. Особенно, если количество полос в сетке меняется. Вслед за изменением количества полос необходимо и менять все значения размеров колонок и рядов. Не самый удобный путь.

40 Для решения этой проблемы в стандартеCSS Grid Layoutпоявилась новая единица измерения - фракция (fraction unit). Она позволяет указать, какую часть свободного пространства должна занять полоса сетки.

41 Эта единица работает по такому же принципу, что иflex-grow, который мы изучали в курсе<a>CSS: Flex</a>. Суть в том, что мы указываем конкретно, сколько частей должна занять ячейка относительно других частей.

42 Сделаем сетку во всю ширину экрана, в которой будет 12 колонок и 12 рядов. При этом размер этих полос должен определяться автоматически, в зависимости от текущего разрешенияviewport. Имея в наличии единицы измеренияfr, эта задача становится максимально простой:

43 <a>https://codepen.io/hexlet/pen/dyGWRoV</a>

44 <h2>Самостоятельное задание</h2>

45 Используя материалы урока, создайте 24 колоночную сетку. Попробуйте различные значения свойств grid-template-columns и grid-template-rows