Day 10 Web Devlopement

CSS Grid Layout is a powerful layout system that allows you to create two-dimensional grid-based layouts on a web page. CSS Grid provides a flexible and responsive way to structure and position elements in a grid format.

Properties for the Parent (Grid Container)

• display

• grid-template-columns

• grid-template-rows

• grid-template-areas

• grid-template

• grid-column-gap

• grid-row-gap

• grid-gap

• justify-items

• align-items

• place-items

• justify-content

• align-content

• place-content

• grid-auto-columns

• grid-auto-rows

• grid-auto-flow

• grid

  Properties for the Children (Grid Items)

  

  • grid-column-start

  • grid-column-end

  • grid-row-start

  • grid-row-end

  • grid-column

  • grid-row

  • grid-area

  • justify-self

  • align-self

  • place-self

https://cssgridgarden.com/

Amazing Fun Game to learn about CSS Grid