My Blog

place-self Property

—

by

Awais Farooq
in

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:

  • align-self
  • justify-self

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>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *