THEMEWP.RU

Шпаргалка классов для сетки (grid)

Шпаргалка классов для сетки (grid)

Основные классы для сетки (grid)

— .grid:
Определяет контейнер для сетки, активируя CSS Grid Layout с помощью display: grid;

— .grid-item:
Указывает на элементы внутри сетки, обычно применяется к дочерним элементам контейнера.

— .full-width:
Позволяет элементу занимать всю ширину сетки (например, grid-column: 1 / -1;)

— .scrollable:
Устанавливает фиксированную высоту для элемента и добавляет вертикальную полосу прокрутки, если содержимое превышает эту высоту (например, overflow-y: auto;)

— .grid-gap:
Задает расстояние между ячейками сетки.

Например, grid-gap: 10px; устанавливает отступы.

— .grid-template-columns:
Определяет количество и ширину колонок в сетке.

Например, grid-template-columns: repeat(3, 1fr); создает три равные колонки.

— .grid-template-rows:
Определяет количество и высоту строк в сетке.

Например, grid-template-rows: auto 100px; задает автоматическую высоту для первой строки и фиксированную высоту 100 пикселей для второй.

— .align-items:
Используется для вертикального выравнивания элементов внутри сетки.

Например, align-items: center; выравнивает элементы по центру.

— .justify-items:
Применяется для горизонтального выравнивания элементов внутри сетки.

Например, justify-items: start; выравнивает элементы по левому краю.

— .responsive:
Можно использовать для адаптации сетки под разные размеры экранов с помощью медиа-запросов.

Пример применения классов

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

Дополнительные классы и свойства для сетки (grid)

— .grid-area:
Позволяет задавать область для элемента сетки с помощью свойства grid-area, что упрощает размещение элементов. Пример:

css

  .grid {
      grid-template-areas: 
          "header header header"
          "sidebar content content"
          "footer footer footer";
  }
  

— .grid-auto-rows:
Устанавливает высоту автоматически создаваемых строк в сетке.

Например, grid-auto-rows: 100px; задает высоту для всех автоматически созданных строк.

— .grid-auto-flow:
Управляет порядком размещения элементов в сетке.

Например, grid-auto-flow: column; заставляет элементы заполнять колонки перед переходом к следующей строке.

— .minmax():
Используется для задания минимальной и максимальной ширины или высоты для колонок и строк.

Например, grid-template-columns: repeat(3, minmax(100px, 1fr)); создает три колонки с минимальной шириной 100 пикселей.

— fractional units (fr):
Задает относительные размеры колонок или строк.

Например, grid-template-columns: 2fr 1fr; означает, что первая колонка будет в два раза шире второй.

— :nth-child():
Позволяет применять стили к конкретным элементам в сетке.

Например, :nth-child(2n) применяется к каждому второму элементу.

— .gap:
Свойство, объединяющее grid-gap, grid-row-gap и grid-column-gap.

Например, gap: 10px; задает одинаковое расстояние между строками и колонками.

— .justify-content:
Управляет горизонтальным выравниванием всей сетки внутри контейнера.

Например, justify-content: space-between; распределяет элементы по ширине контейнера с равными промежутками.

— .align-content:
Управляет вертикальным выравниванием всей сетки внутри контейнера.

Например, align-content: center; выравнивает сетку по центру контейнера.

Пример использования дополнительных классов

Эти классы и свойства значительно расширяют возможности вашей сетки, позволяя создавать

Предыдущая:

Метки: grid, шпаргалка