CSS Grid and place-items together

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:
anikakapoor
CSS-Misc
CSS-Properties
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS