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 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
h 1 { text-align : center ; margin-top : 10px ; } /* arrange boxes of container in three column form*/ .container { display : grid; grid-template-columns: 1 fr 1 fr 1 fr; } /* 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:
Contact Us