Day 7 of the 120-days fullstack software development bootcamp. Worked on CSS Grid. Unlike Flex-Box that helps in aligning items in one dimension either row or column, grid helps us to arrange contents in two dimensions rows and columns. This gives us the advantage making complex web layout easier. Just like flex-box, it's called with a display:grid which gives the grid layout to that parent/current container. It has properties like-: grid-template-columns and grid-template-rows which is used to determine the number of rows and columns we want along with sizes the rows and columns should occupy, if we want a responsive size the "fr" is recommended instead of "px" or "rem". The children of the parents container with the display of grid can also be manually placed using grid child properties-: grid-column and grid-row which enables us to place child items using our desired start and end point.
Another grid property, called Grid Areas helps us to create a layout that is sematic for a page, for instance you can map it out like header, main content and footer with grid areas so that your web-page can have sematic meaning.