In this section, we will learn what the grid place-self property is and how to use it in CSS.
Click here to run the example grid place-self property.
CSS grid place-self Property Definition and Usage
If we want to change the vertical and horizontal position of a specific item within a cell in a grid, we use justify-self and align-self respectively. But using these properties might be tedious for some developers!
For this reason, CSS provided a shorthand property named place-self by which we can position an item vertically and horizontally in one declaration.
CSS grid place-self Property Syntax
place-self: align-self-value justify-self-value;CSS grid place-self Property Value
-
The first value aligns the target item. Any value we set for
`align-self` can be used here as well.
-
The second value justifies the target item. Any value we set for
`justify-self` can be used here as well.
Note: because the values for align-self and justify-self are the same, we can set only one value if we want to use equal values for both of them.
Example:
place-self: center;Is equal to:
justify-self: center;
align-self: center;Example: place-self in CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*, ::after, ::before{
margin:unset;
box-sizing: border-box;
}
.grid{
display: grid;
grid-template-rows: repeat(2 , 20vh);
grid-template-columns: repeat(3, 30vw);
grid-gap: 2px;
margin:4em;
}
.item{
background-color: whitesmoke;
border:thin solid;
}
.item1{
place-self: start end;
}
</style>
</head>
<body>
<div class = "grid">
<div class = "item item1">Item One</div>
<div class = "item item2">Item Two</div>
<div class = "item item3">Item Three</div>
<div class = "item item4">Item Four</div>
<div class = "item item5">Item Five </div>
</div>
</body>
</html>Example: grid place-self property
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*, ::after, ::before{
margin:unset;
box-sizing: border-box;
}
.grid{
display: grid;
grid-template-rows: repeat(2 , 20vh);
grid-template-columns: repeat(3, 30vw);
grid-gap: 2px;
margin:4em;
}
.item{
background-color: whitesmoke;
border:thin solid;
}
.item1{
place-self:center;
}
</style>
</head>
<body>
<div class = "grid">
<div class = "item item1">Item One</div>
<div class = "item item2">Item Two</div>
<div class = "item item3">Item Three</div>
<div class = "item item4">Item Four</div>
<div class = "item item5">Item Five </div>
</div>
</body>
</html>