Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет CSS Фон CSS Границы CSS Поля CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Перекрытие CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдоклассы CSS Псевдоэлементы CSS Прозрачность CSS Навигация сайта CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Атрибут селектора CSS Формы CSS Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

CSS3 Закругленные углы CSS3 Изображен. граница CSS3 Слои фона изображ. CSS3 Цвета CSS Ключевые сл. цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D Трансформация CSS3 3D Трансформация CSS3 Переход CSS3 Анимация CSS3 Всплыв. подсказки CSS3 Стиль изображения CSS3 Отраж. изображения CSS3 Объект-подгонка CSS3 Объект-позиция CSS3 Маскировка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Размеры боксов CSS3 Медиа запросы CSS3 Медиа примеры CSS3 Флексбокс

CSS Адаптивный

АВД-Введение АВД-Область просмотра АВД-Вид сетка АВД-Медиа запросы АВД-Изображения АВД-Видео АВД-Фреймворк АВД-Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры кода CSS Онлайн редактор CSS Фрагменты кода CSS Тест-викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

CSS Расположение сетки



Заголовок

Меню

Главное

Справа

Подвал

Попробуйте сами »


Расположение сетки

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


Поддержка браузера

Свойства сетки поддерживаются во всех современных браузерах.

57.0 16.0 52.0 10 44

Элементы сетки

Макет сетки состоит из родительского элемента с одним или несколькими дочерними элементами.

Пример
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9

Попробуйте сами »



Свойство display

HTML-элемент становится контейнером сетки, когда его свойству display присвоено значение grid или inline-grid.

Пример
.grid-container {
  display: grid;
}

Попробуйте сами »

Пример
.grid-container {
  display: inline-grid;
}

Попробуйте сами »

Все прямые дочерние элементы контейнера grid автоматически становятся элементами сетки.


Столбцы сетки

Вертикальные линии элементов сетки называются столбцами.


Строки сетки

Горизонтальные линии элементов сетки называются строками.


Пробелы в сетке

Пробелы между каждым столбцом/строкой называются пробелами.

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

  • column-gap
  • row-gap
  • gap
Пример

Свойство column-gap задает интервал между столбцами:

.grid-container {
  display: grid;
  column-gap: 50px;
}

Попробуйте сами »

Пример

Свойство row-gap задает интервал между строк:

.grid-container {
  display: grid;
  row-gap: 50px;
}

Попробуйте сами »

Пример Свойство gap является сокращенным свойством для свойств row-gap и column-gap:

.grid-container {
  display: grid;
  gap: 50px 100px;
}

Попробуйте сами »

Пример

Свойство gap, также можно использовать для установки как исходного промежутка, так и промежутка столбца в одном значении:

.grid-container {
  display: grid;
  gap: 50px;
}

Попробуйте сами »


Линии сетки

Линии между столбцами называются линиями столбцов.

Линии между строками называются линиями строк.

При размещении элемента сетки в сеточном контейнере обращайтесь к номерам строк:

Пример

Поместите элемент таблицы в строку столбца 1, и пусть он заканчивается в строке столбца 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Попробуйте сами »

Пример

Поместите элемент сетки в строку 1 и оставьте его заканчиваться на строке 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Попробуйте сами »


Все свойства CSS Grid

Свойство Описание
column-gap Задает интервал между столбцами
gap Сокращенное свойство для свойств row-gap и olumn-gap
grid Сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow
grid-area Задает либо имя для элемента сетки, либо это свойство является сокращенным свойством для свойств grid-row-start, grid-column-start, grid-row-end, и grid-column-end
grid-auto-columns Задает размер столбца по умолчанию
grid-auto-flow Указывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rows Задает размер строки по умолчанию
grid-column Сокращенное свойство для свойств grid-column-start и grid-column-end
grid-column-end Указывает, где должен заканчиваться элемент сетки
grid-column-gap Задает размер промежутка между столбцами
grid-column-start Указывает, с чего начинать элемент сетки
grid-gap Сокращенное свойство для свойств grid-row-gap и grid-column-gap
grid-row Сокращенное свойство для свойств grid-row-start и grid-row-end
grid-row-end Указывает, где должен заканчиваться элемент сетки
grid-row-gap Задает размер промежутка между строками
grid-row-start Указывает, с чего начинать элемент сетки
grid-template Сокращенное свойство для свойств grid-template-rows, grid-template-columns и grid-areas
grid-template-areas Указывает, как отображать столбцы и строки, используя именованные элементы таблицы
grid-template-columns Определяет размер столбцов и количество столбцов в макете сетки
grid-template-rows Задает размер строк в макете сетки
row-gap Задает интервал между строками сетки