What is css Grid ?
Css grid is powerful tool that css gives you to easily align items and create two dimensional layout.
- Grid and Flexbox both are part of css and both can be use in the similar way.
- Flexbox was created first and has a bit browser compatibility.
- I have learned both.
Grid Contanier and Grid items
Grid container holds grid items. Grid items is direct children of Grid conatiners. A conatiner created with
display: grid;
Flex items are direct children of flex containers.
<div class="Grid-container">
<div class="items">item1</div>
<div class="items">item2</div>
<div class="items">item3</div>
</div>
`
Properties of Grid container.
Following properties very important in order to understand and work with Grid.
- grid-template-column
- grid-template-rows
- grid-gap
- grid-auto-column
- grid-auto-rows
- justify-content
- align-items
Properties of Grid items.
- grid-rows
- grid-column
- grid-area
- align-self
- justify-self