CSS свойство place-items

Определение и применение

Свойство place-items объединяет align-items и justify-items: первое значение относится к align-items, второе — к justify-items.

Задаётся контейнеру. В Grid выравнивает все элементы внутри их областей по двум осям; во Flexbox работает часть align-items, а justify-items игнорируется.

Выравнивание не меняет размеры дорожек. Для растягивания размер элемента по соответствующей оси должен быть автоматическим; автоматические внешние отступы имеют приоритет.

Если второе значение пропущено, оно копируется из первого. Значение должно быть допустимо для обеих составляющих; например, place-items: center центрирует по двум осям.

Связанные свойства: align-items, justify-items.

Попробуйте значения place-items

Короткая запись задаёт align-items и justify-items для элементов внутри ячеек.

Значение свойства

place-items: stretch

HTML и CSS примера
HTML
<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  place-items: stretch;
}

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

Спецификация: CSS align

Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры
Совместимостьcss.properties.place-items
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
place-items✓59✓79✓45✓46✓11✓59✓45✓43✓11✓7.0✓59✓11
anchor-center✓125✓125✓147✓111✓26✓125✓147✓83✓26✓27.0✓125✓26
В flex-контейнере✓59✓79✓45✓46✓11✓59✓45✓43✓11✓7.0✓59✓11
В grid-контейнере✓59✓79✓45✓46✓11✓59✓45✓43✓11✓7.0✓59✓11

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS
place-items: <'align-items'> <'justify-items'>?;

/* Глобальные значения */
place-items: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. ? означает необязательную часть. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

JavaScript
element.style.placeItems = "center center";

Начальное значение свойства

  • align-items — normal;
  • justify-items — legacy.

Значения свойства

Значения place-items
Значение Описание
align-items Выравнивает все элементы по поперечной оси Flexbox или блочной оси Grid.
justify-items Выравнивает элементы Grid по строчной оси. Во Flexbox игнорируется.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для ненаследуемого свойства place-items устанавливает его начальное значение.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Box Alignment — спецификация place-items.

Наследуется

Нет.

Анимируемое

Дискретно: значение переключается, а не создаёт плавное перемещение элементов.

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

Выравнивание в Grid

Измените center на start end. Первое значение задаёт выравнивание по блочной оси, второе — по строчной.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.container {
    background: #eef2f5;
    border: 1px dashed #8495a5;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Выравнивание в Grid</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: grid;
    grid-template: repeat(2, 50px) / repeat(2, 1fr);
    height: 180px;
    place-items: center;
}

Какая часть place-items работает во Flexbox

Замените center end на start end: изменится выравнивание по поперечной оси. Теперь меняйте только второе значение — во Flexbox оно не действует. Распределением по главной оси управляет justify-content.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color-scheme: light dark;
    background: Canvas;
    color: CanvasText;
}
.item {
    min-width: 0;
    padding: 8px;
    overflow-wrap: anywhere;
    border: 1px solid #447a9b;
    background: light-dark(#e4f0f8, #293e50);
}
.container {
    outline: 1px dashed;
}
section {
    margin-bottom: 24px;
}
h2 {
    font-size: 16px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Какая часть place-items работает во Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>
style.css
CSS
.container {
    display: flex;
    height: 180px;
    place-items: center end;
}
.item {
    width: 50px;
}