In this section, we will learn what the grid place-items property is and how to use it in CSS.
Click here to run the example of grid place-items property.
CSS grid place-items Property Definition and Usage
If we want to change the vertical and horizontal position of all items within their cells in a grid, we use justify-items and align-items respectively. But using these properties might be tedious for some developers!
For this reason, CSS provided a shorthand property named place-items by which we can position items vertically and horizontally in one declaration.
CSS grid place-items Property Syntax
place-items: align-items-value justify-items-value;CSS grid place-items Property Value
-
The first value aligns items. Any value we set for
`align-items` can be used here as well.
-
The second value justifies items. Any value we set for
`justify-items` can be used here as well.
Note: because the values for align-items and justify-items are the same, we can use only one value if we want to use equal values for both of them.
Example:
place-items: center;Is equal to:
justify-items: center;
align-items: center;Example: place-items 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;
place-items: start end;
margin:4em;
}
.item{
background-color: whitesmoke;
border:thin solid;
}
</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: CSS grid place-items 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;
place-items: center;
margin:4em;
}
.item{
background-color: whitesmoke;
border:thin solid;
}
</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>