CSS (Cascading Style Sheets) — это язык, предназначенный для описания и управления внешним видом веб-страниц, созданных с использованием языков разметки, таких как HTML или XML. Он позволяет задавать стили для элементов, включая их цвет, шрифт, размеры, расположение и поведение, отделяя визуальное представление от структуры контента.
CSS упрощает процесс дизайна и позволяет легко изменять оформление веб-страниц без необходимости редактирования их содержимого.
Подписывайтесь на мой канал в Телеграмм, чтобы ничего не пропустить.
Сегодня рассмотрим все свойства на букву G:
1. gap
Описание: Свойство gap используется для задания расстояния (отступов) между строками и столбцами в контейнерах с сеткой (grid) или флекс-контейнерах (flex). Оно позволяет задать единое значение отступов как для строк, так и для столбцов.
Использование: Применяется в сочетании с CSS-свойствами display: grid или display: flex, чтобы добавить пространство между элементами внутри контейнера.
Значения:
- <length>: Значение в пикселях, процентах, em и других единицах (например, 10px, 1rem, 5% и т.д.).
- normal: Устанавливает стандартное значение расстояния (обычно 0).
Пример:
Результат: Между ячейками сетки будет расстояние в 20 пикселей.
2. grid
Описание: Свойство grid — это сокращение, которое позволяет одновременно задавать свойства сеточного контейнера, такие как grid-template-rows, grid-template-columns, и grid-template-areas.
Использование: Применяется для создания сеток (grid layout) с описанием строк, столбцов и областей.
Значения:
- <'grid-template-rows'> / <'grid-template-columns'>: Определяет размеры строк и столбцов сетки.
- <'grid-template-areas'>: Определяет именованные области сетки.
Пример:
Результат:
- Верхняя строка будет занимать 50 пикселей высоты и содержать две ячейки: "header".
- Нижняя строка будет занимать оставшееся пространство и содержать "sidebar" и "main".
3. grid-area
Описание: Свойство grid-area позволяет элементу занимать определённую область сетки, заданную через grid-template-areas. Также может использоваться для задания начальных и конечных позиций строки и столбца.
Использование: Применяется как для именованных областей (grid-template-areas), так и для определения неименованных областей.
Значения:
- <name>: Имя области, определённое в grid-template-areas.
- <row-start> / <column-start> / <row-end> / <column-end>: Четыре числа, определяющие положение области.
Пример:
Результат: Элементы sidebar и main займут соответствующие области, определённые в grid-template-areas.
4. grid-auto-columns
Описание: Свойство grid-auto-columns задаёт размеры автоматически создаваемых столбцов в сетке.
Использование: Применяется только тогда, когда сетка автоматически добавляет новые столбцы для размещения элементов.
Значения:
- <length>: Ширина автоматически созданного столбца (например, 100px, 1fr, min-content, max-content).
Пример:
Результат: Если добавятся дополнительные столбцы, их ширина будет равна 200px.
5. grid-auto-flow
Описание: Свойство grid-auto-flow определяет, как браузер будет автоматически размещать элементы внутри сетки, если они не были явно размещены с использованием grid-area или других методов. Оно указывает, будут ли элементы добавляться по строкам или по столбцам, а также можно ли заполнять пустые области.
Использование: Применяется к контейнерам с display: grid для управления автоматическим размещением элементов.
Значения:
- row: Элементы будут добавлены по строкам (это значение по умолчанию).
- column: Элементы будут добавлены по столбцам.
- dense: Включает заполнение пропусков в сетке (уплотнение).
- row dense: Уплотнение с добавлением элементов по строкам.
- column dense: Уплотнение с добавлением элементов по столбцам.
Пример:
Результат:
- Элемент 1 займет первую и вторую колонку в первой строке.
- Элементы 2, 3 и 4 заполнят оставшиеся места с уплотнением.
6. grid-auto-rows
Описание: Свойство grid-auto-rows задаёт размеры автоматически создаваемых строк в сетке.
Использование: Применяется только тогда, когда сетка автоматически добавляет новые строки для размещения элементов.
Значения:
- <length>: Высота автоматически созданной строки (например, 100px, 1fr, min-content, max-content).
Пример:
Результат: Каждая строка, автоматически созданная для размещения элементов, будет иметь высоту 150px.
7. grid-column
Описание: Свойство grid-column — это сокращение для задания позиции элемента в сетке по столбцам. Оно объединяет свойства grid-column-start и grid-column-end.
Использование: Применяется для размещения элемента в определённых столбцах сетки.
Значения:
- <start> / <end>: Начальная и конечная позиция элемента по столбцам.
- span <number>: Задает, сколько столбцов должен охватывать элемент.
Пример:
Результат: Элемент будет размещён, начиная со 2-го столбца и заканчивая 4-м столбцом.
8. grid-column-end
Описание: Свойство grid-column-end определяет, где заканчивается элемент по столбцам в сетке.
Использование: Применяется для уточнения конечной позиции элемента по столбцам.
Значения:
- <number>: Позиция по столбцам (например, 3).
- span <number>: Указывает, сколько столбцов должен охватывать элемент от его начальной позиции.
- auto: Автоматическое положение (по умолчанию).
Пример:
Результат: Элемент начнётся со 2-го столбца и займет два столбца.
9. grid-column-start
Описание: Свойство grid-column-start определяет, где начинается элемент по столбцам в сетке.
Использование: Применяется для уточнения начальной позиции элемента по столбцам.
Значения:
- <number>: Позиция по столбцам (например, 2).
- span <number>: Указывает, сколько столбцов должен охватывать элемент от его начальной позиции.
- auto: Автоматическое положение (по умолчанию).
Пример:
Результат: Элемент будет размещён, начиная с 3-го столбца.
10. grid-template
Описание: Свойство grid-template — это сокращение для задания строк, столбцов и областей сетки.
Использование: Применяется для описания сетки в целом, включая размеры строк и столбцов, а также именованные области.
Значения:
- <grid-template-rows> / <grid-template-columns>: Определяет размеры строк и столбцов.
- <grid-template-areas>: Определяет шаблон именованных областей.
Пример:
Результат: Элементы будут располагаться в сетке с заданной структурой строк, столбцов и областей.
На этом все свойства CSS, начинающиеся на букву "g", разобраны.
Поддержать блог можно лайком и комментарием. А если хочется сделать больше, можно кинуть монетку сове на кофе.
Если Вам интересно, что еще можно найти на канале QA Helper, прочитайте статью: Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?
Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика
Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.