BootstrapTema

CSS Grid шпаргалка с примерами

Основные концепции CSS Grid

Прежде чем перейти к свойствам, важно понять основные термины, используемые в CSS Grid:

• Контейнер: Элемент, который становится Grid-контейнером с помощью свойства display: grid.
• Ячейка (Grid Cell): Минимальная единица сетки, образованная пересечением строки и столбца.
• Линия (Grid Line): Линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы.
• Дорожка (Grid Track): Пространство между двумя соседними линиями (строка или столбец).
• Область (Grid Area): Область, образованная пересечением нескольких строк и столбцов.

Создание Grid-контейнера

Чтобы создать Grid-контейнер, нужно применить к элементу свойство display: grid или display: inline-grid. После этого все дочерние элементы становятся Grid-элементами.

.container {
 display: grid;
}
 

Определение строк и столбцов

Для определения строк и столбцов используются свойства grid-template-rows и grid-template-columns. Эти свойства позволяют задать размеры строк и столбцов.

.container {
 display: grid;
 grid-template-columns: 100px 200px auto;
 grid-template-rows: 50px 100px;
}
 

Функция repeat()

Функция repeat() позволяет упростить создание повторяющихся строк или столбцов. Например, repeat(3, 1fr) создаст три столбца с равным распределением свободного пространства.

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

Единица fr

Единица fr (fraction) используется для распределения свободного пространства между строками или столбцами. Например, 1fr 2fr означает, что второй столбец будет в два раза шире первого.

Промежутки (Gap)

Для создания промежутков между строками и столбцами используются свойства row-gap и column-gap. Также можно использовать сокращённое свойство gap.

.container {
 display: grid;
 gap: 10px;
}
 

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

Элементы можно размещать в Grid с помощью свойств grid-row, grid-column, grid-area и других. Эти свойства позволяют указывать начальную и конечную линии для строк и столбцов.

.item {
 grid-row: 1 / 3;
 grid-column: 2 / 4;
}
 

Именованные области

С помощью свойства grid-template-areas можно создавать именованные области, что упрощает размещение элементов.

.container {
 display: grid;
 grid-template-areas:
 "header header"
 "sidebar main"
 "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
 

Выравнивание элементов

CSS Grid предоставляет мощные инструменты для выравнивания элементов внутри ячеек. Для этого используются свойства justify-items, align-items, justify-content и align-content.

.container {
 display: grid;
 justify-items: center;
 align-items: center;
}
 

Адаптивные сетки

CSS Grid отлично подходит для создания адаптивных макетов. Используя медиа-запросы и функции вроде minmax(), можно создавать сетки, которые адаптируются под разные размеры экранов.

.container {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
 

Примеры использования CSS Grid

Простая сетка 2x2

Создана простая сетка 2x2 с фиксированными размерами ячеек.

Сетка с автоматическими столбцами

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

Сетка с именованными областями

Создана сетка с именованными областями для размещения элементов.

Сетка с разными размерами ячеек

Создана сетка с ячейками разных размеров.

Сетка с перекрывающимися элементами

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

Сетка с асимметричными столбцами

Создана сетка с асимметричными столбцами.

Сетка с выравниванием по правому краю

Создана сетка с выравниванием элементов по правому краю.

Сетка с выравниванием по нижнему краю

Создана сетка с выравниванием элементов по нижнему краю.

Сетка с фиксированным первым столбцом

Создана сетка с фиксированным первым столбцом и гибкими остальными.

Сетка с выравниванием по горизонтали

Создана сетка с выравниванием элементов по горизонтали.

Сетка с разрывом между элементами

Создана сетка с увеличенным разрывом между элементами.

Сетка с фиксированной высотой строк

Создана сетка с фиксированной высотой строк.

Сетка с выравниванием по краям

Создана сетка с выравниванием элементов по краям.

Сетка с выравниванием по центру и краям

Создана сетка с комбинированным выравниванием.

Примеры использования CSS Grid с Flexbox

Grid для строк, Flexbox для столбцов

Используем Grid для создания строк, а внутри каждой строки применяем Flexbox для распределения столбцов.

Grid для макета страницы, Flexbox для навигации

Используем Grid для создания макета страницы, а Flexbox для выравнивания элементов навигации.

Grid для карточек, Flexbox для содержимого карточек

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

Grid для сетки изображений, Flexbox для подписей

Используем Grid для создания сетки изображений, а Flexbox для выравнивания подписей под изображениями.

Grid для макета, Flexbox для адаптивных элементов

Используем Grid для создания макета, а Flexbox для адаптивного изменения порядка элементов.

Grid для макета, Flexbox для центрирования

Используем Grid для создания макета, а Flexbox для центрирования содержимого внутри Grid-элементов.

Grid для макета, Flexbox для выравнивания текста

Используем Grid для создания макета, а Flexbox для выравнивания текста внутри элементов.

Grid для макета, Flexbox для кнопок

Используем Grid для создания макета, а Flexbox для выравнивания кнопок внутри элементов.

Grid для макета, Flexbox для адаптивных изображений

Используем Grid для создания макета, а Flexbox для адаптивного изменения размера изображений.

Grid для макета, Flexbox для выравнивания форм

Используем Grid для создания макета, а Flexbox для выравнивания элементов формы.

Grid для макета, Flexbox для адаптивного меню

Используем Grid для создания макета, а Flexbox для адаптивного меню.

Grid для макета, Flexbox для выравнивания текста и изображений

Используем Grid для создания макета, а Flexbox для выравнивания текста и изображений.

Grid для макета, Flexbox для выравнивания кнопок и текста

Используем Grid для создания макета, а Flexbox для выравнивания кнопок и текста.

Grid для макета, Flexbox для выравнивания иконок и текста

Используем Grid для создания макета, а Flexbox для выравнивания иконок и текста.

Grid для макета, Flexbox для адаптивных блоков

Используем Grid для создания макета, а Flexbox для адаптивного изменения блоков.

Примеры использования CSS Grid & JavaScript

Динамическое добавление элементов в Grid

Используем JavaScript для добавления новых элементов в Grid-контейнер.

Изменение размера Grid-ячеек с помощью JavaScript

Используем JavaScript для изменения размера ячеек Grid.

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

Используем JavaScript для реализации перетаскивания элементов внутри Grid.

Динамическое изменение количества столбцов

Используем JavaScript для изменения количества столбцов в Grid.

Анимация Grid-элементов

Используем JavaScript для анимации элементов Grid.

Сортировка элементов в Grid

Используем JavaScript для сортировки элементов Grid.

Изменение порядка элементов в Grid

Используем JavaScript для изменения порядка элементов в Grid.

Динамическое создание Grid-сетки

Используем JavaScript для создания Grid-сетки на лету.

Изменение размера Grid-ячеек с помощью ползунка

Используем JavaScript и ползунок для изменения размера ячеек Grid.

Переключение между Grid и Flexbox

Используем JavaScript для переключения между Grid и Flexbox.

Динамическое изменение размера Grid-ячеек

Используем JavaScript для изменения размера ячеек Grid в зависимости от ввода пользователя.

Анимация перехода между Grid и Flexbox

Используем JavaScript для анимации переключения между Grid и Flexbox.

Динамическое добавление строк и столбцов

Используем JavaScript для добавления строк и столбцов в Grid.

Динамическое изменение порядка элементов

Используем JavaScript для изменения порядка элементов в Grid с помощью кнопок.

Динамическое создание Grid-сетки с пользовательским вводом

Используем JavaScript для создания Grid-сетки на основе ввода пользователя.

Анимация перетаскивания Grid-элементов

Используем JavaScript для анимации перетаскивания элементов в Grid.

Динамическое изменение цвета Grid-элементов

Используем JavaScript для изменения цвета элементов Grid.

Динамическое создание Grid-сетки с изображениями

Используем JavaScript для создания Grid-сетки с изображениями.

Динамическое изменение Grid-областей

Используем JavaScript для изменения областей Grid.

14. Перетаскивание для изменения размера Grid-ячеек

Используем JavaScript для изменения размера ячеек Grid с помощью перетаскивания.

• Предыдущий
•  Следующий