CSS Grid Lesson 1: Introduction to CSS Grid

📌 What is CSS Grid?

CSS Grid is a two-dimensional Layout system in CSS that allows you to create complex, responsive layouts with ease. It works on both rows and columns, making it versatile for various designs.

📌 Grid vs. Flexbox: Key Differences

CSS Grid: Best for creating two-dimensional layouts (rows and columns).

Flexbox: Best for creating one-dimensional layouts (either rows OR columns).

CSS Grid Properties

🔹 Display Property

display: grid; - Defines a block grid container.
display: inline-grid; - Defines an inline grid container.

🔹 Grid Container Properties

grid-template-columns - Defines column layout.
grid-template-rows - Defines row layout.
grid-template-areas - Defines named grid areas.
gap - Sets the spacing between grid items.
justify-items - Aligns grid items horizontally.
align-items - Aligns grid items vertically.

🔹 Grid Item Properties

grid-column - Specifies column span.
grid-row - Specifies row span.
justify-self - Aligns item horizontally in its cell.
align-self - Aligns item vertically in its cell.

🔹 Advanced Values

repeat() - Repeats a pattern.
minmax() - Sets a flexible size range.
auto-fit & auto-fill - Flexible column behavior.