Grid Placement

🔹 CSS Grid Placement – How to Place Items Inside a Grid

1. Important Grid Terms

• Grid Container → The parent div where the entire grid is created.

• Grid Items → The child elements inside the grid container.

• Tracks → Row tracks and column tracks that form the rows and columns.

• Grid Cell → The intersection of a row and a column (the smallest unit of the grid).

• Grid Lines → The lines that separate tracks. You can use the gap property to create spacing between them, but you cannot add colors or content directly to grid lines.

👉 Together, these build the entire grid structure.

---

2. Setting Up a Grid Layout

• First, set the container to:

display: grid;

• To make the container cover the full screen height:

height: 100vh;

• To create columns:

grid-template-columns: 1fr 1fr 1.5fr;

👉 The first 2 columns will be equal, and the 3rd column will be slightly larger.

• To create rows:

grid-template-rows: 1fr 1fr;

👉 This makes 2 equal rows.

• To add spacing between rows and columns:

gap: 3rem;

👉 By default, grid items are placed one by one into the cells → first item in cell1, second in cell2, and so on.

---

3. Centering Content with Flexbox

To center content inside a grid item both horizontally and vertically, you can use Flexbox:

display: flex;
justify-content: center;
align-items: center;

👉 Using Grid + Flexbox together makes layout design much easier.

---

4. Spanning Grid Items

• To make an item cover multiple columns:

grid-column: span 2;

• To make an item cover multiple rows:

grid-row: span 2;

---

5. Positioning with Grid Line Numbers

When you highlight a grid in Chrome DevTools, you’ll see line numbers:

• Positive numbers → Count from the left (1, 2, 3, …)

• Negative numbers → Count from the right (-1 means the last line).

Example:

grid-column-start: 2;
grid-column-end: 4;

👉 This means the item will start at column line 2 and end at column line 4.

---

6. Order Property (Similar to Flexbox)

• Each grid item has a default order: 0.

• If you set a higher order, the item will move further down or to the right.

👉 It works relatively:

• order: 1 → comes after order: 0

• order: 5 → comes after order: 2, etc.

---

7. Grid Area (Shorthand)

You can control the full placement of an item with grid-area shorthand:

grid-area: row-start / column-start / row-end / column-end;

Example:

grid-area: 2 / 1 / 3 / 3;

👉 This means the item starts at row 2 and ends at row 3, starts at column 1 and ends at column 3.

---

8. Overlapping Items

One of the coolest features of CSS Grid is overlapping items.

.book {
  grid-area: 1 / 2 / 3 / 4;
  background: #ff880080; /* 80 = transparency */
}

👉 This makes the .book div overlap on top of other grid items.

---

9. Practice – Grid Garden 🎮

Just like Flexbox Froggy, there’s a fun game for CSS Grid → Grid Garden.
👉 Play here

It has 28 levels that help you practice CSS Grid in a fun, interactive way.

---

✅ Summary

• Grid Container → Parent div

• Grid Items → Child divs

• Tracks = Rows + Columns

• Cells = Smallest units

• Lines = Boundaries between tracks

• grid-column / grid-row → Span items across multiple cells

• grid-area → Full positioning control in one shorthand

• order → Change the default flow of items

• overlap → Place one item on top of another

---

✨ With these concepts, you can create complex and responsive grid layouts easily.