”;
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>
”;