🤓 "Создание Веб-сайта:" CSS сетка / grid (сетка) — это вид разметки, в котором элементы на сайте расположены в виде таблицы. Главная фишка этой таблицы в гибкости — можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними. А ещё сетки хорошо приспосабливаются к разным размерам экрана, что делает их адаптивными. Чтобы использовать CSS сетку, нам нужно создать контейнер с вложенными элементами. Для большего понимания, мы присваиваем контейнеру класс "grid-container", а для вложенных элементов "grid-items". В таблице стилей внутри правила grid-container мы добавляем свойство: • display: grid; • grid-template-columns: 50px 10% auto; _создание столбцов таблицы. Мы можем создавать столько столбцов, сколько захотим. В качестве значений мы можем использовать пиксели, проценты, auto (ширина равна ширине содержимого) и новые единицы измерения fr. fr - это дробная единица, то есть ширина столбцов распределяется в соответствии с данными значениями (чем больше число fr, тем больше пространства достается столбцу) • grid-template-columns: repeat (3, 1fr); _мы можем использовать функцию repeat для создания повторяющихся столбцов. Сначала мы указываем количество повторений, а затем какое значение нужно повторять. • grid-template-rows: ...; _создание строк таблицы. В качестве значений мы можем передавать такие же значения, как со столбцами. Если у нас не хватит элементов, чтобы заполнить все ячейки таблицы, мы получим пустые ячейки. • grid-template: ... / ...; _сокращение для создания столбцов и строк. Первыми значениями являются строки, а вторыми столбцы. Значения разделяются косой чертой /.