Главная1 курс UX/UI7 занятие. Grid Layout3. Свойства Grid Items
7 занятие

3. Свойства Grid Items

grid-column-start, grid-column-end, grid-row-start, grid-row-end

Определяют начальную и конечную позицию элемента.

.item {
  grid-column-start: 1;     /* Начинается с линии 1 */
  grid-column-end: 3;       /* Заканчивается на линии 3 */
  grid-row-start: 2;        /* Начинается с линии 2 */
  grid-row-end: span 2;     /* Занимает 2 строки */
  
  /* Можно использовать именованные линии */
  grid-column-start: sidebar-start;
  grid-column-end: content-end;
}

grid-column и grid-row

Сокращенные свойства для позиционирования элементов.

.item {
  grid-column: 1 / 3;           /* От линии 1 до 3 */
  grid-row: 2 / span 2;         /* От линии 2, занимает 2 строки */
  
  /* Ключевое слово span */
  grid-column: span 2;          /* Занимает 2 столбца */
  
  /* Именованные линии */
  grid-column: sidebar-start / content-end;
}

grid-area

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

.item {
  /* Как сокращение для grid-row-start/grid-column-start/grid-row-end/grid-column-end */
  grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
  
  /* Как ссылка на именованную область */
  grid-area: header;
}

justify-self

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

.item {
  justify-self: start;    /* Слева */
  justify-self: end;      /* Справа */
  justify-self: center;   /* По центру */
  justify-self: stretch;  /* Растянуть (по умолчанию) */
}

align-self

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

.item {
  align-self: start;      /* Сверху */
  align-self: end;        /* Снизу */
  align-self: center;     /* По центру */
  align-self: stretch;    /* Растянуть (по умолчанию) */
  align-self: baseline;   /* По базовой линии */
}

place-self

Сокращенное свойство для align-self и justify-self.

.item {
  place-self: center stretch; /* align-self justify-self */
  place-self: end; /* Оба значения одинаковы */
}
Далее