Skip to content
Related Articles

Related Articles

Improve Article

CSS Grid and place-items together

  • Last Updated : 22 Jun, 2021

In this article, we will see how can we use the CSS grid and place-items property together to arrange elements in 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 class box.
  • Add class initial to the first div, middle to the second div, and end to the third div.

Example: HTML 
 

html






<!DOCTYPE html>
<html>
    <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 
 

html




<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 first container*/
    .end {
        place-items: end;
    }
    .box {
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #829099;
    }
</style>

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 first 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :