CSS Grid

• CSS Grid is a powerful layout system in CSS that allows you to create complex two-dimensional grid-based layouts. It provides a flexible way to divide a webpage into rows and columns, enabling precise control over the placement and alignment of elements within the grid.

In the example below, we create this type of website layout using CSS grid:

CSS grid properties can be categorized into the following groups:

• Container Properties:

• display
• grid-template-columns
• grid-template-rows
• grid-template
• row-gap
• column-gap
• gap
• justify-content
• justify-items
• align-content
• align-items
• grid-auto-flow
• grid-auto-rows
• grid-auto-columns
• place-items
• place-content
• grid-template-areas

• Item Properties:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• justify-self
• align-self
• place-self
• grid-area

• Line-based Properties:

• grid-column-gap
• grid-row-gap

• These are the main categories of CSS grid properties. Each category has specific properties that control different aspects of the grid layout.