Open In App

CSS Grid and place-items together

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads