”;
CSS place-items is a shorthand property used in CSS Grid Layout to set both the align-items and justify-items properties in a single declaration. It allows you to align and justify grid items within the grid container along both the block (column) and inline (row) axes simultaneously
This property is a shorthand for the following CSS properties:
Possible Values
-
A single align-items value aligns in both the block and inline directions.
-
An align-items value sets the block direction alignment, followed by justify-items, which specifies inline alignment.
Applies To
All elements.
Syntax
Keyword Values
place-items: center; place-items: normal start;
Positional Alignment
place-items: center normal; place-items: start legacy; place-items: end normal; place-items: self-start legacy; place-items: self-end normal; place-items: flex-start legacy; place-items: flex-end normal;
Baseline Alignment
place-items: baseline normal; place-items: first baseline legacy; place-items: last baseline normal; place-items: stretch legacy;
CSS place-items – Placing Items in a Grid Container
The following example demonstrates the different behavior of the place-items property in the grid layout −
<html>
<head>
<style>
div > div {
box-sizing: border-box;
border: 2px solid blue;
}
.row {
margin-bottom: 20px;
}
select {
padding: 2px;
background-color: yellow;
border-radius: 10px;
color: blue;
}
#grid-container {
height: 400px;
width: 350px;
place-items: start;
background-color: red;
display: grid;
grid-template-columns: repeat(3, 100px);
}
#grid-container > div {
width: 60px;
min-height: 60px;
padding: 5px;
margin: 5px;
}
.gridItem1 {
background-color: greenyellow;
}
.gridItem2 {
background-color: violet;
}
</style>
</head>
<body>
<div class="row">
<label for="place-items-values">place-items: </label>
<select id="place-items-values">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="stretch">stretch</option>
<option value="center normal">center normal</option>
<option value="normal start">normal start</option>
<option value="center normal">center normal</option>
<option value="start legacy">start legacy</option>
<option value="end normal">end normal</option>
<option value="self-start legacy">self-start legacy</option>
<option value="self-end normal">self-end normal</option>
<option value="flex-start legacy">flex-start legacy</option>
<option value="flex-end normal">flex-end normal</option>
<option value="baseline">baseline</option>
<option value="first baseline legacy">first baseline legacy</option>
<option value="last baseline">last baseline</option>
<option value="stretch legacy">stretch legacy</option>
</select>
</div>
<div id="grid-container">
<div class="gridItem1">Grid Item 1</div>
<div class="gridItem2">Grid Item 2</div>
<div class="gridItem1">Grid Item 3</div>
<div class="gridItem2">Grid Item 4</div>
<div class="gridItem1">Grid Item 5</div>
</div>
<script>
const values = document.getElementById("place-items-values");
const container = document.getElementById("grid-container");
values.addEventListener("change", () => {
container.style.placeItems = values.value;
});
</script>
</body>
</html>
CSS place-items – Placing Items in a Flex Container
The following example demonstrates the different behavior of the place-items property in the flex layout −
<html>
<head>
<style>
div > div {
box-sizing: border-box;
border: 2px solid blue;
display: flex;
}
.row {
margin-bottom: 20px;
}
select {
padding: 2px;
background-color: yellow;
border-radius: 10px;
color: blue;
}
#flex-container {
height: 350px;
width: 350px;
align-items: start;
background-color: red;
display: flex;
flex-wrap: wrap;
}
#flex-container > div {
width: 60px;
min-height: 60px;
padding: 5px;
margin: 5px;
}
.flexItem1 {
background-color: greenyellow;
}
.flexItem2 {
background-color: violet;
}
</style>
</head>
<body>
<div class="row">
<label for="place-items-values">place-items: </label>
<select id="place-items-values">
<option value="start">start</option>
<option value="center">center</option>
<option value="end">end</option>
<option value="stretch">stretch</option>
<option value="center normal">center normal</option>
<option value="normal start">normal start</option>
<option value="center normal">center normal</option>
<option value="start legacy">start legacy</option>
<option value="end normal">end normal</option>
<option value="self-start legacy">self-start legacy</option>
<option value="self-end normal">self-end normal</option>
<option value="flex-start legacy">flex-start legacy</option>
<option value="flex-end normal">flex-end normal</option>
<option value="baseline">baseline</option>
<option value="first baseline legacy">first baseline legacy</option>
<option value="last baseline">last baseline</option>
<option value="stretch legacy">stretch legacy</option>
</select>
</div>
<div id="flex-container">
<div class="flexItem1">Flex Item 1</div>
<div class="flexItem2">Flex Item 2</div>
<div class="flexItem1">Flex Item 3</div>
<div class="flexItem2">Flex Item 4</div>
<div class="flexItem1">Flex Item 5</div>
<div class="flexItem2">Flex Item 6</div>
<div class="flexItem1">Flex Item 7</div>
</div>
<script>
const values = document.getElementById("place-items-values");
const container = document.getElementById("flex-container");
values.addEventListener("change", () => {
container.style.placeItems = values.value;
});
</script>
</body>
</html>
Advertisements
”;