In this article, we will see how can we use the CSS grid and place-items property together to arrange elements on the web page.
place-items is not specifically for the CSS grid it can be used with other properties too.
Steps:
- Create three div with class container
- Each div will contain three more div with a class box.
- Add class initial to the first div, middle to the second div, and end to the third div.
Example: Here is an example of a CSS grid and place-item property.
html
<!DOCTYPE html><html>
<head>
<title>CSS grid and palce-item property</title>
</head>
<body>
<h1>Place-items in start</h1>
<!-- Container to be placed from starting -->
<div class="container initial">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
<h1>Place-items in middle</h1>
<!-- Container to be placed in middle -->
<div class="container middle">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
<h1>Place-items in end</h1>
<!-- Container to be placed in end -->
<div class="container end">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
</body>
</html>
|
- Arrange items in each container in three columns using the CSS grid.
- Add property place-items:start to div with class initial, similarly add place-items:center and place-items:end to div with class middle and end respectively.
Example: CSS
CSS
h1 {
text-align: center;
margin-top: 10px;
}/* arrange boxes of container in three column form*/.container { display: grid;
grid-template-columns: 1fr 1fr 1fr;
}/* starting position for first container*/.initial { place-items: start;
}/* middle position for second container*/.middle {
place-items: center;
}/* ending position for third container*/.end { place-items: end;
}.box { width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background-color: #829099;
} |
Complete Code:
html
<!DOCTYPE html><html>
<head>
<style>
h1 {
text-align: center;
margin-top: 10px;
}
/* arrange boxes of container
in three column form*/
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* starting position for first container*/
.initial {
place-items: start;
}
/* middle position for second container*/
.middle {
place-items: center;
}
/* ending position for third container*/
.end {
place-items: end;
}
.box {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
background-color: #829099;
}
</style>
</head>
<body>
<h1>Place-items in start</h1>
<!-- Container to be placed from starting -->
<div class="container initial">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
<h1>Place-items in middle</h1>
<!-- Container to be placed in middle -->
<div class="container middle">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
<h1>Place-items in end</h1>
<!-- Container to be placed in end -->
<div class="container end">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
</div>
</body>
</html>
|
Output: