Order of the items
The grid items can be placed anywhere according to the requirements of the project. The order of the grid items can be changed with different screen sizes using media queries.
Example: The example illustrates the order of items with the help of grid area property to each element we want to change the order.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "containergrid" > < div class = "box" id = "box1" >grid_Item1</ div > < div class = "box" id = "box2" >grid_Item2</ div > < div class = "box" id = "box3" >grid_Item3</ div > < div class = "box" id = "box4" >grid_Item4</ div > < div class = "box" id = "box5" >grid_Item5</ div > < div class = "box" id = "box6" >grid_Item6</ div > </ div > </ body > </ html > |
CSS
.containergrid { display : grid; grid-template-columns: 1 fr 1 fr 1 fr; gap: 10px ; background-color : rgb ( 159 , 206 , 159 ) } #box 2 { grid-area: 1 / 3 / 1 / 4 ; background-color : rgb ( 73 , 147 , 122 ); color : antiquewhite; } #box 4 { grid-area: 1 / 2 / 1 / 2 ; background-color : rgb ( 73 , 147 , 122 ); color : antiquewhite; } #box 5 { grid-area: 2 / 3 / 3 / 4 ; background-color : rgb ( 73 , 147 , 122 ); color : antiquewhite; } #box 6 { grid-area: 1 / 1 / 2 / 2 ; background-color : rgb ( 73 , 147 , 122 ); color : antiquewhite; } .containergrid>div { padding : 10px ; font-size : 20px ; } .box { border : 2px solid green ; } |
Output:
CSS Grid Items
CSS Grid Items are contained in the Grid Container, where for each row, the container will contain one grid item for each column, by default. The Grid Items can also be styled, which will span in multiple columns and/or rows.
Grid Item is a no of child boxes wrapped inside the grid container. There are various properties including, grid-column property, grid-row property, grid-area property, naming grid, and order of the items. These grid items are responsive and work well on all screen sizes.
Table of Content
- The grid-column Property
- The grid-row Property
- The grid area property
- Naming Grid items
- Order of the items
Contact Us