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

1
2
3
4
5

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

Дочерние элементы (элементы)

Сетчатый контейнер содержит сетчатые элементы (пункты).

По умолчанию, контейнер в каждой строке каждого столбца содержит сетчатый элемент (пункт), но вы можете установить стиль сетчатых элементов, чтобы они распространялись на несколько столбцов и/или строк.

Свойство grid-column:

grid-column Свойство определяет, в каком столбце будет размещен проект.

Вы можете определить начало и конец элемента.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Комментарий:grid-column Свойства - это сокращенные свойства grid-column-start и grid-column-end.

Чтобы разместить проект, вы можете ссылаться на номер строки (line numbers) или использовать ключевое слово "span", чтобы определить, на сколько столбцов будет распространяться этот проект.

Пример

делает 'item1' начинается с первого столбца и заканчивается перед пятым столбцом:

.item1 {
  grid-column: 1 / 5;
}

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

Пример

делает 'item1' начинается с первого столбца и охватывает 3 столбца:

.item1 {
  grid-column: 1 / span 3;
}

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

Пример

делает 'item2' начинается с второго столбца и охватывает 3 столбца:

.item2 {
  grid-column: 2 / span 3;
}

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

атрибут grid-row:

grid-row атрибут определяет, в哪个 строке будет расположен элемент.

Вы можете определить начало и конец элемента.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Комментарий:grid-row атрибут является сокращением атрибутов grid-row-start и grid-row-end.

Для размещения элементов вы можете ссылаться на номер строки или использовать ключевое слово 'span', чтобы определить, на сколько строк будет распространяться этот элемент:

Пример

делает 'item1' начинается с row-line 1 и заканчивается в row-line 4:

.item1 {
  grid-row: 1 / 4;
}

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

Пример

делает 'item1' начинается с первого ряда и охватывает 2 строки:

.item1 {
  grid-row: 1 / span 2;
}

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

атрибут grid-area

grid-area атрибут может использоваться в качестве сокращенного атрибута grid-row-start, grid-column-start, grid-row-end и grid-column-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Пример

делает 'item8' начинается с row-line 1 и column-line 2, заканчивается в row-line 5 и column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

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

Пример

делает 'item8' начинается с row-line 2 и column-line, и охватывает 2 строки и 3 столбца:

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

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

Имя сеточного элемента

grid-area атрибут также можно использовать для назначения имен сеточным элементам.

Header
Menu
Main
Right
Footer

можно использовать сетевой контейнер: grid-template-areas атрибут для ссылки на имена сеточных элементов.

Пример

Имя элемента 'item1' - 'myArea', и он охватывает все пять столбцов сетки макета:

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

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

Каждая строка определяется апострофами (' ').

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

Комментарий:Точка означает сеточный элемент без названия.

Пример

Позвольте "myArea" занимать два столбца в сетке разметки (точка означает элемент без названия):

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

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

Чтобы определить две строки, определите столбцы второй строки в другом наборе апострофов:

Пример

Чтобы "item1" занимал два столбца и две строки, введите вторую строку в другом наборе апострофов:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

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

Пример

Назвать все элементы и создать шаблон веб-страницы, который можно использовать в любое время:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

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

Порядок элементов

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

Первый элемент в HTML-коде не должен отображаться в первую очередь в сетке.

1
2
3
4
5
6

Пример

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

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

Вы можете использовать медиа-запросы для изменения порядка размеров экранов.

Пример

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

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