CSS

📦 Grid Item Properties — Controlling Elements Inside the Grid

🌐 What Are Grid Item Properties?

Grid Item Properties are applied to children of a grid container. These properties allow you to control an item's size, position, alignment, and how it spans across rows or columns. While Grid Container Properties shape the overall layout, Grid Item Properties define how each item behaves within that layout.

>>“Grid Items are like actors on a stage — Grid determines the stage, Items decide the performance.”

🎯 Key Grid Item Properties

1️⃣ grid-column

Specifies where the item starts and ends horizontally (columns).

grid-column Example

.item {
  grid-column: 1 / 4;  /* Start at column 1, end at column 4 */
}

/* You can also span columns */
.item {
  grid-column: span 2; /* Span across 2 columns */
}

2️⃣ grid-row

Specifies where the item starts and ends vertically (rows).

grid-row Example

.item {
  grid-row: 2 / 5;   /* Start at row 2, end at row 5 */
}

.item {
  grid-row: span 3; /* Span across 3 rows */
}

3️⃣ grid-column-start / grid-column-end

Individually control the starting and ending grid lines of columns.

Column Line Controls

.item {
  grid-column-start: 1;
  grid-column-end: 3;
}

4️⃣ grid-row-start / grid-row-end

Same as above, but for rows.

Row Line Controls

.item {
  grid-row-start: 2;
  grid-row-end: 4;
}

5️⃣ grid-area

Combines grid-row-start / grid-column-start / grid-row-end / grid-column-endinto a single property. Also used to assign an item to a named area.

Using Line Numbers

grid-area: 1 / 2 / 3 / 4;
/* row-start / column-start / row-end / column-end */

Using Named Area

grid-area: header;

🧭 Alignment Properties (For Individual Items)

6️⃣ justify-self

Horizontally aligns an item inside its grid cell.

justify-self

justify-self: start | center | end | stretch;

7️⃣ align-self

Vertically aligns an item inside its cell.

align-self

align-self: start | center | end | stretch;

8️⃣ place-self

Shorthand for align-self + justify-self.

place-self

place-self: center;

📐 How Placement Works in Grid

Grid items use a system of grid lines to position themselves. These lines form the boundaries between rows and columns.

Term	Meaning
grid line	Boundary separating tracks
grid track	Row or column space
grid cell	Intersection of row + column
grid area	Group of grid cells

🧠 Example: Complex Placement

Complex Item Positioning

.item1 {
  grid-column: 1 / span 2; /* Start at column 1, span 2 columns */
  grid-row: 1 / 3;         /* Start at row 1, end at row 3 */
}

.item2 {
  grid-area: 2 / 3 / 4 / 5; 
  /* row-start / col-start / row-end / col-end */
}

📌 Special Behavior: Auto Placement

When an item doesn't specify grid-column or grid-row, it follows the container’s grid-auto-flow rules.

Note

⚡ Tip: Use grid-column: span N to easily stretch items inside auto grids.

🧩 When to Use Grid Item Properties

Creating hero sections that span multiple tracks
Positioning card layouts and galleries
Aligning individual components inside UI panels
Building dashboards with varied widget sizes
Fine-tuning responsive layouts

🔥 Summary

Grid Item Properties give you full control over how each element behaves inside a grid. By mastering these, you can create flexible, responsive, and beautifully structured layouts without relying on complex wrapper divs or hacks.

>>“Grid Items let you place anything, anywhere — with precision and elegance.”

Learn more atMDN CSS Grid Docs 📘