CSS Grid and place-items together

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


    CSS:



  • 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    h1 {
        text-align: center;
        margin-top: 10px;
    }
    /* arrange boxes of container in three coloumn 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>

chevron_right


Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                text-align: center;
                margin-top: 10px;
            }
            /* arrange boxes of container
          in three coloumn 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.