CSS Grid is a powerful two-dimensional layout system that enables easy design of both rows and columns simultaneously.

1️⃣ Basics of CSS Grid

🔹 Grid Container & Items

• The parent element is called the grid container.
• The children inside the container are grid items.

To enable grid layout:

.container {
  display: grid;
}

2️⃣ Defining Rows & Columns

🔹 Columns (grid-template-columns)

Defines the number of columns and their width:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
}

✅ Units: fr (fractional unit), px, %, em, etc.

🔹 Rows (grid-template-rows)

Defines row height:

.container {
  display: grid;
  grid-template-rows: 100px 200px; /* Two rows with different heights */
}

3️⃣ Grid Gaps

To set spacing between grid items: