Учебник по CSS Grid для начинающих

Эта статья изначально была опубликована в моем личном блоге.

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

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

Зачем использовать CSS-сетку

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

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

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

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

Ваша первая сетка

Допустим, у нас есть следующий HTML:

<div class="container">
  <p class="red"></p>
  <p class="green"></p>
  <p class="blue"></p>
</div>

Мы хотим сделать div с классом container сеткой, в которой мы можем управлять элементами внутри, как объяснялось ранее.

Все, что нам нужно сделать, это изменить свойство display класса container:

.container {
    display: grid;
}

Это сделает элемент с классом container элементом сетки. Если вы проверите это, то увидите, что ничего не видите. Причина этого в том, что элементы p в сетке .container не имеют ни элементов, ни ширины, ни высоты.

Добавьте следующий CSS:

.container p {
  width: 100px;
  height: 100px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

Это установит ширину и высоту элементов p равными 100px. Это также даст другой цвет фона для каждого элемента.

Если вы сейчас проверите свою сетку, она должна выглядеть примерно так:

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

Вместо указания ширины и высоты каждого элемента вы также можете использовать grid-auto-rows и grid-auto-columns для элемента сетки, чтобы указать высоту и ширину элементов по умолчанию:

.container {
    ...
    grid-auto-rows: 100px;
    grid-auto-columns: 100px;
}

Размещение элементов

Сетки состоят из строк и столбцов. У вас может быть столько строк или столбцов в сетке, сколько вы хотите, и вы можете назначать свои элементы определенным местам в сетке.

Столбцы

Допустим, вы хотите разместить эти 3 элемента как 3 элемента подряд. мы можем сделать это, используя свойство grid-template-columns.

Это свойство принимает n значений, где n — это количество столбцов в сетке, а каждое значение — это ширина каждого столбца.

Например, если вы хотите иметь 3 столбца в сетке, каждый из которых имеет ширину 100px, вы можете использовать:

grid-template-columns: 100px 100px 100px;

Это разделит сетку на 3 столбца, и каждый столбец будет 100px.

Допустим, вы хотите, чтобы второй столбец был 200px:

grid-template-columns: 100px 200px 100px;

Если у вас также нет определенного значения для применения, вы можете использовать значение auto:

grid-template-columns: auto auto auto;

В качестве альтернативы вместо повторения значений вы можете использовать функцию repeat():

grid-template-columns: repeat(3, auto);

CSS-функция repeat принимает первый параметр, указывающий, сколько раз должно повторяться выражение, а второй параметр — оператор, который нужно повторить.

Вернемся к нашему примеру, мы разместим наши элементы в 3 столбцах, каждый из которых имеет автоматическую ширину.

Измените свойства .container на следующие:

.container {
  display: grid;
  grid-template-columns: repeat(3, auto);
}

Это гарантирует, что в сетке будет 3 столбца, ширина каждого из которых будет равна auto.

Затем удалите ранее установленное свойство ширины для элементов p. Теперь он должен иметь только высоту:

.container p {
  height: 100px;
}

Если вы сейчас проверите сетку, она должна иметь 3 элемента одинаковой ширины рядом друг с другом.

Разрыв между столбцами

Во многих случаях вы можете не захотеть, чтобы столбцы располагались рядом друг с другом. Чтобы добавить зазор между столбцами, вы можете использовать свойство grid-column-gap, которое принимает длину зазора между столбцами в качестве значения.

Допустим, мы хотим добавить промежуток 5px между нашими столбцами. Добавьте следующее свойство к .container:

grid-column-gap: 5px;

Это добавит 5px пробела между столбцами сетки.

Размещение в колонках

Вы можете управлять размещением элементов относительно столбцов, используя свойства grid-column-start и grid-column-end. Эти свойства позволяют указать, в какой колонке должен начинаться элемент сетки и/или в какой колонке должен заканчиваться элемент сетки.

Значение для grid-column-start и grid-column-end может быть числом. В этом случае он укажет столбец, с которого нужно начать, и столбец, который должен закончиться раньше.

Например, если вы хотите указать, что элемент .red должен начинаться в начале и заканчиваться перед 3-м столбцом, вы используете следующие свойства:

.red {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 3;
}

Теперь элемент .red будет занимать 2 столбца, а элемент .blue будет перемещен в строку ниже.

В качестве альтернативы вы можете указать значение для grid-column-start и grid-column-end в формате span n, где n — количество столбцов, которые необходимо охватить. Это не указывает, где именно должен начинаться или заканчиваться столбец. Вместо этого он указывает, что в своем естественном месте он должен занимать n столбцов.

Если мы хотим применить тот же пример, мы можем вместо этого использовать следующие свойства для .red:

.red {
  background-color: red;
  grid-column-start: span 2;
}

Это означает, что элемент должен занимать 2 столбца. В результате получится такой же макет, как показано ранее.

Эти свойства можно использовать для еще большего контроля размещения элементов. Например, теперь, когда синий элемент находится в отдельной строке, давайте поместим его в конец:

.blue {
  background-color: blue;
  grid-column-start: 3;
}

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

Ряды

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

Чтобы указать, сколько строк имеет сетка, вы можете использовать grid-template-rows. Подобно столбцам, grid-template-rows принимает n значений, где n — это количество строк, которые будет иметь сетка, а значение — это высота каждой строки.

Итак, если вы хотите иметь 2 строки высотой 100px, вы можете использовать следующее:

grid-template-rows: 100px 100px;

В качестве альтернативы вы можете использовать функцию repeat:

grid-template-rows: repeat(2, 100px);

Это создаст 2 строки, каждая из которых имеет высоту 100 пикселей.

Вернемся к нашему примеру. В этом разделе мы хотим иметь 2 столбца и 2 строки. Измените .container на следующее:

.container {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, 100px);
  grid-column-gap: 5px;
}

Это создаст 2 столбца шириной auto и 2 строки высотой 100px.

Далее сбрасываем остальные стили, которые мы выполняли ранее:

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

Это просто установит цвет фона каждого из дочерних элементов. Обратите внимание, что вам больше не нужно устанавливать высоту и ширину элементов, так как мы применяем их, используя grid-template-columns и grid-template-rows.

Если вы сейчас проверите свою сетку, у вас должно быть 2 элемента в одной строке и элемент во второй.

Промежуток между рядами

Во многих случаях вам не понадобятся элементы в разных рядах рядом друг с другом. Вы можете добавить пространство между строками, используя grid-row-gap.

Допустим, мы хотим добавить интервал 5px между строками. Добавьте следующее свойство в класс .container:

grid-row-gap: 5px;

Это добавит 5px пробела между строками в нашей сетке.

Размещение в рядах

Вы можете использовать макет сетки для управления размещением элементов в строках. Для этого вы можете использовать свойства grid-row-start и grid-row-end.

Значение grid-row-start и grid-row-end может быть числом. Значением grid-row-start будет строка, с которой должен начинаться элемент, а значением grid-row-end будет строка, перед которой элемент должен закончиться.

Например, чтобы убедиться, что элемент red занимает 2 строки, мы можем использовать следующие свойства:

.red {
  background-color: red;
  grid-row-start: 1;
  grid-row-end: 3;
}

Кроме того, вы можете указать значение для двух свойств в формате span n, где n — это количество строк, которые должен охватывать элемент.

Таким образом, вместо предыдущих используемых свойств вы можете использовать следующее, чтобы убедиться, что красный элемент охватывает 2 строки:

.red {
  background-color: red;
  grid-row-start: span 2;
}

В результате получится тот же макет.

Эти свойства полезны не только для изменения количества строк, занимаемых элементом. Их также можно использовать для полного контроля размещения каждого элемента.

Допустим, вы хотите поместить синий столбец в первую строку. Для этого можно применить следующий стиль:

.blue {
  background-color: blue;
  grid-row-start: 1;
}

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

Чтобы синий элемент был справа, а красный элемент оставался слева, вы можете использовать свойство grid-column-start:

.blue {
  background-color: blue;
  grid-row-start: 1;
  grid-column-start: 2;
}

Это сохранит исходное размещение красного элемента, но синий элемент будет в первом столбце.

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

Области сетки

Вместо управления сеткой как столбцами и строками вы можете управлять сеткой как областями.

Допустим, мы хотим реализовать макет заголовка, контента и боковой панели. Зеленый элемент будет заголовком, красный — контентом, а синий — боковой панелью.

Во-первых, начните с присвоения различных имен областям элементов с помощью свойства grid-area:

.red {
  background-color: red;
  grid-area: Content;
}

.green {
  background-color: green;
  grid-area: Header;
}

.blue {
  background-color: blue;
  grid-area: Sidebar;
}

Это дает элементу .red имя области сетки Content, элементу .green имя области сетки Header, а элементу .blue область сетки Sidebar.

Затем вы используете свойство grid-template-areas элемента контейнера сетки, чтобы определить, как должны быть распределены эти разные области. grid-template-areas принимает в качестве значения n строковых значений, где n — это количество строк в макете сетки, который вы создаете. Значением будет название областей, разделенных пробелом. Каждое имя определяет столбец. Итак, если вы хотите иметь 2 столбца в сетке и хотите, чтобы элемент Header занимал 2 столбца подряд, вы можете использовать значение "Header Header" для строки.

В нашем примере мы создадим 2 строки и 3 столбца. Первая строка будет просто Header, которая будет охватывать 3 столбца, а вторая строка будет Content, которая будет охватывать 2 столбца, и Sidebar, которая будет состоять только из одного столбца:

.container {
  display: grid;
  grid-template-areas: "Header Header Header" 
    "Content Content Sidebar";
  grid-row-gap: 5px;
  grid-column-gap: 5px;
  grid-auto-rows: 100px;
}

Поскольку нам нужны три столбца в сетке, каждое строковое значение в grid-template-areas должно иметь 3 имени области. Первое строковое значение соответствует первой строке сетки. Поскольку мы просто хотим, чтобы Header занимал его, значение будет Header, повторенным 3 раза.

Второе строковое значение относится ко второй строке. Мы хотим, чтобы область Content занимала 2 столбца. Итак, в строковом значении мы дважды повторяем область Content, затем область Sidebar.

Обратите внимание, что каждое строковое значение заключено в ", а строковые значения разделены пробелом.

Мы также добавляем пробел между строками и столбцами, используя grid-row-gap и grid-column-gap. Мы также устанавливаем высоту строки по умолчанию на 100px, используя grid-auto-rows.

В результате получится следующий макет:

единица измерения

Чтобы убедиться, что столбцы или строки в сетке имеют одинаковую высоту или ширину, вы можете использовать единицу fr. Например, чтобы создать 3 столбца одинаковой ширины:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
}

Заключение

В этом уроке вы узнали, как работает CSS Grid Layout с точки зрения строк, столбцов и областей. Использование макета сетки в CSS поможет вам контролировать размер и размещение элементов на странице или в элементе-контейнере.

Первоначально опубликовано на https://blog.shahednasser.com 5 января 2022 г.