Сетевой контейнер CSS

1
2
3
4
5
6
7
8

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

Контейнер сетки

Чтобы сделать HTML-элемент контейнером сетки, вам нужно установить display property установлена в grid или inline-grid.

Контейнер сетки состоит из сеточных элементов,placed в столбцах и строках.

пroperty grid-template-columns

grid-template-columns property определяет количество столбцов в макете сетки и может определять ширину каждого столбца.

Значение представляет собой список, разделенный пробелами, где каждый элемент определяет длину соответствующего столбца.

Если вы хотите, чтобы макет сетки содержал 4 столбца, укажите ширину этих 4 столбцов; если все столбцы должны иметь одинаковую ширину, установите значение "auto".

Пример

Создается сетка, содержащая четыре столбца:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

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

Примечание:Если в сетке из 4 столбцов больше 4 элементов, сетка автоматически добавляет новые строки и вставляет эти элементы в них.

grid-template-columns property также может использоваться для указания размера столбца (ширины).

Пример

Установите размер этих 4 столбцов:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

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

пroperty grid-template-rows

grid-template-rows property определяет высоту каждого столбца.

1
2
3
4
5
6
7
8

Значение представляет собой список, разделенный пробелами, где каждый элемент определяет высоту соответствующего ряда:

Пример

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

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

пroperty justify-content

justify-content property используется для выравнивания всего сетки в контейнере.

1
2
3
4
5
6
7
8

Примечание:Общая ширина сетки должна быть меньше ширины контейнера, чтобы property justify-content работал.

Пример

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

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

Пример

.grid-container {
  display: grid;
  justify-content: space-around;
}

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

Пример

.grid-container {
  display: grid;
  justify-content: space-between;
}

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

Пример

.grid-container {
  display: grid;
  justify-content: center;
}

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

Пример

.grid-container {
  display: grid;
  justify-content: start;
}

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

Пример

.grid-container {
  display: grid;
  justify-content: end;
}

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

пroperty align-content

align-content Свойство используется для вертикального выравнивания всего сетки внутри контейнера.

1
2
3
4
5
6
7
8

Примечание:Общая высота сетки должна быть меньше высоты контейнера, чтобы свойство align-content работало.

Пример

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

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

Пример

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

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

Пример

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

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

Пример

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

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

Пример

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

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

Пример

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

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