What is css Grid ? | Css Grid guide | Css grid course

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

Start your Css-Grid Journey.