1️⃣ What is CSS Grid?

CSS Grid is a powerful two-dimensional layout system for the web. It lets you design web pages using rows and columns — unlike Flexbox, which works mainly in one direction (row or column).

Grid allows you to:

• Create complex layouts easily
• Control placement of items in rows and columns simultaneously
• Build responsive and flexible designs
• Align and size grid items precisely

2️⃣ The display: grid Property (Core Concept)

.container {
display: grid;
}

• Turns an element into a grid container.
• Direct children become grid items.
• Enables grid-specific layout properties to work inside the container.

3️⃣ Defining Grid Structure: grid-template-columns and grid-template-rows

.container {
grid-template-columns:100px 200px 1fr;
grid-template-rows: 50px 100px;
}

• grid-template-columns defines how many columns there are and their widths.
• grid-template-rows defines how many rows there are and their heights.
• Units can be pixels (px), percentages (%), fractions (fr), or auto.
• 1fr means a fraction of leftover space.