CSS - place-self Property

CSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set.

This property is a shorthand for the following CSS properties:

Possible Values

auto − Aligns the item based on the parent's align-self value.
normal− Based on the layout mode, the effect of normal keyword changes:
- Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.
- Behaves like stretch in static position of absolutely-positioned layouts.
- Behaves like stretch for flex items.
- Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.
- Does not apply to block-level boxes , and to the table cells.
self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.
self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.
flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.
flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.
center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.
baseline, first baseline, last baseline −
- First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items.
- These values specify the involvment of first- or last-baseline alignment in the alignment of the content.
- start is the fallback alignment for first-baseline and end for last-baseline.
stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.

Applies To

Block-level boxes, absolutely-positioned boxes, and grid items.

Syntax

Keyword Values

place-self: auto center;
place-self: normal start;

Positional Alignment

place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;

Baseline Alignment

place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

CSS place-self - normal start Value

The following example demonstrates the place-self: normal start property aligns Item 2 to the start of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: normal start;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - auto center Value

The following example demonstrates the place-self: auto center property aligns Item 2 at the center of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: auto center;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - center normal Value

The following example demonstrates the place-self: center normal property aligns Item 2 at the center horizontally and vertically of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: center normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - end normal Value

The following example demonstrates the place-self: end normal property aligns Item 2 on the right edge of its grid cell vertically and horizontally to the top edge of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - start auto Value

The following example demonstrates the place-self: start auto property aligns Item 2 to the start of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - self-start auto Value

The following example demonstrates the place-self: self-start auto property positioned Item 2 at the start of the row vertically and automatically in the horizontal direction −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: self-start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - self-end normal Value

The following example demonstrates the place-self: self-end normal property aligns Item 2 to the bottom vertically and horizontally to the start of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: self-end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - flex-start auto Value

The following example demonstrates the place-self: flex-start auto property aligns Item 2 to the left edge vertically and horizontally to the top of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: flex-start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - flex-end normal Value

The following example demonstrates the place-self: flex-end normal property aligns Item 2 to the right edge of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: flex-end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - baseline normal Value

The following example demonstrates the place-self: baseline normal property aligns Item 2 to the baseline of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: baseline normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - last baseline normal Value

The following example demonstrates the place-self: last baseline normal property aligns Item 2 to the baseline of the last row of its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: last baseline normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - stretch auto Value

The following example demonstrates the place-self: stretch auto property stretches Item 2 horizontally to fill the available space in its grid cell −

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      min-height: 50px;
   }
   .item2 {
      place-self: stretch auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>