What is CSS Grid?

CSS Grid is a two-dimensional layout system

→ Works with rows AND columns

Unlike Flexbox (1D), Grid handles:

• Complex layouts
• Full page structures
• Sections with rows + columns

Best Use Cases

• Full website layouts
• Dashboard UI
• Card grids
• Magazine layouts

When you use:

.container {
  display: grid;
}

Two things are created:

• Grid Container (parent)
• Grid Items (children)

 GRID CONCEPT (MOST IMPORTANT)

Grid Lines

👉 Invisible lines that divide the grid

Grid Tracks

👉 Space between lines (rows/columns)

Grid Cell

👉 Single box

Grid Area

👉 Multiple cells combined

ACTIVATING GRID

.container {
  display: grid;
}

👉 Children automatically become grid items

grid-template-columns (CORE PROPERTY)

👉 Defines columns

.container {
  grid-template-columns: 200px 200px 200px;
}

🔥 FRACTION UNIT (fr)

👉 MOST IMPORTANT UNIT

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

👉 Equal distribution

🔥 MIXED CONTROL

.container {
  grid-template-columns: 200px 1fr 2fr;
}

👉 Real-world layout:

• Sidebar → fixed
• Content → flexible 

 grid-template-rows

.container {
  grid-template-rows: 100px 200px auto;
}

👉 auto = content decides height

gap

.container {
  gap: 20px;
}

👉 Works for both rows + columns

👉 Cleaner than margin

column-gap & row-gap

column-gap: 20px;
row-gap: 10px;

👉 Useful when you want different spacing

ALIGNMENT SYSTEM (VERY IMPORTANT)

🔹 4.1 justify-content (whole grid horizontally)

justify-content: center;

🔹 4.2 align-content (whole grid vertically)

align-content: center;

🔹 4.3 place-content (shortcut)

place-content: center;

🔹 4.4 justify-items (inside each cell)

justify-items: center;

🔹 4.5 align-items

align-items: center;

🔹 4.6 place-items

place-items: center;

GRID ITEMS (DEEP CONTROL)

🔹 5.1 grid-column (LINE BASED PLACEMENT)

.item {
  grid-column: 1 / 3;
}

👉 From line 1 → line 3

🔥 Shortcut with span

.item {
  grid-column: span 2;
}

👉 Takes 2 columns

🔹 5.2 grid-row

.item {
  grid-row: 1 / 3;
}

🔹 5.3 grid-area (POWERFUL)

.item {
  grid-area: 1 / 1 / 3 / 3;
}

👉 row-start / col-start / row-end / col-end

Individual Item Alignment

🔹 justify-self

.item {
  justify-self: center;
}

👉 Align single item horizontally

🔹 align-self

.item {
  align-self: end;
}

👉 Align single item vertically

🔹 place-self (shortcut)

.item {
  place-self: center;
}

👉 Combines both

 What is Responsive Grid?

Responsive Grid means:

👉 Layout automatically adjusts based on screen size

👉 No need for too many media queries

👉 Items resize, wrap, and reorganize smoothly

🔥 2. The Core Idea

Instead of saying:

grid-template-columns: 300px 300px 300px;

We use flexible + smart units

3. MOST IMPORTANT TECHNIQUE

👉 repeat() + auto-fit + minmax()

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

🔹 repeat()

repeat(3, 1fr);

👉 Repeat columns

🔹 auto-fit

👉 Automatically fits as many columns as possible

• Expands items to fill space
• Removes empty columns

🔹 minmax()

minmax(250px, 1fr)

👉 Defines:

• Minimum width = 250px
• Maximum = flexible (1fr)

🔥 RESULT

• Desktop → 4 columns
• Tablet → 2 columns
• Mobile → 1 column

auto-fill vs auto-fit

🔸 auto-fit

• Expands items to fill space
• Removes empty columns

🔸 auto-fill

• Keeps empty columns
• Maintains structure