ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS How To CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS object-fit CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Flexbox CSS Media Queries CSS MQ Examples

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks

CSS Grid

Grid Intro Grid Container Grid Item

CSS Examples

CSS Templates

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Grid Item


1

2

3

4

5


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

контейнер Grid содержит элементысетки.

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


Свойство столбца сетки:

Свойство grid-column определяет, на какой столбец (ы) поместить элемент.

Вы определяете, где будет запускаться элемент, и где будет заканчиваться элемент.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Примечание: Свойство Сетка-столбец является сокращенным свойством для свойств сетка- столбец-начало и столбцы сетки-конца.

Чтобы разместить элемент, можно ссылаться на номера строкили использовать ключевое слово «span» для определения количества столбцов, которые будет охватывать элемент.

Пример

Сделайте «Item1» старт на линии 1 и конец на линии 5:

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

Пример

Сделать "Item1" начать на колонке 1 и span 3 колонки:

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

Пример

Сделать "Item2" начать на колонке 2 и span 3 колонки:

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


Свойство строки сетки:

Свойство grid-row определяет, в какой строке поместить элемент.

Вы определяете, где будет запускаться элемент, и где будет заканчиваться элемент.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Примечание: Свойство Сетка-строка является сокращенным свойством свойств сетка- строка-начало и Сетка-конец строки.

Чтобы разместить элемент, можно ссылаться на номера строк или использовать ключевое слово «span» для определения количества строк, которые будут охватывать элемент:

Пример

Make "item1" start on row-line 1 and end on row-line 4:

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

Пример

Сделайте «Item1» начните на рядке 1 и пролетайте 2 рядка:

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


The grid-area Property

grid-areaсвойство может использоваться в качестве сокращенного свойства для свойства Сетка-строка-начало, Сетка-столбец-начало, сетка-конец строки и Сетка-конец столбца.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Пример

Сделать "итем8" начать на строку-строка 1 и столбец-линия 2, и конец на строке-строка 5 и столбец Строка 6:

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

Пример

Сделайте «итем8» старт на рядке-линия 2 и колонка-линия 1, и span 2 рядка и 3 колонки:

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

Именование элементов сетки

Свойство grid-area также можно использовать для присвоения имен элементам сетки.

Header

Menu

Main

Right

Footer

Именованные элементы сетки могут быть отнесены к свойству grid-template-areas контейнера Grid.

Пример

Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:

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

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

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

Примечание: Знак периода представляет элемент сетки без имени.

Пример

Пусть "мяреа" span два столбца в сетке пять столбцов макета (знаки периода представляют элементы без имени):

.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 / 3 / 4; }
  .item3 { grid-area: 2 / 1 / 2 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 3 / 2; }
  .item6 { grid-area: 2 / 3 / 2 / 4; }
}