🌐 What Are Grid Properties?

CSS Grid properties control how a grid container and its grid items behave. These properties define the structure (rows, columns, gaps), placement, alignment, responsiveness, and flow of the grid layout. Understanding Grid Properties is essential to mastering CSS Grid architecture.

🏗️ Grid Container Properties

These properties apply to the parent element — the grid container.

1️⃣ display: grid / inline-grid

.container {
  display: grid;         /* block-level grid */
  display: inline-grid;  /* inline-level grid */
}

2️⃣ grid-template-columns & grid-template-rows

Defines the structure of columns and rows.

grid-template-columns: 200px 1fr 2fr;
grid-template-rows: 100px auto 80px;

3️⃣ grid-template-areas

Visually maps layout sections using names.

grid-template-areas:
  "header header"
  "sidebar content"
  "footer footer";

4️⃣ grid-gap / row-gap / column-gap

Controls spacing between grid tracks.

gap: 20px;         /* row + column gap */
row-gap: 10px;
column-gap: 20px;

5️⃣ grid-auto-rows / grid-auto-columns

Specifies size for implicitly created rows or columns.

grid-auto-rows: 150px;
grid-auto-columns: 100px;

6️⃣ grid-auto-flow

Controls how items are auto-placed. Values: row | column | dense

grid-auto-flow: row;     /* default */
grid-auto-flow: column;
grid-auto-flow: row dense;

📦 Grid Item Properties

These properties apply to the children inside the grid container.

1️⃣ grid-column & grid-row

Defines where an item starts and ends.

grid-column: 1 / 3;  /* span across 2 columns */
grid-row: 2 / 4;     /* span across 2 rows */

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

grid-row-start / grid-row-end

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

grid-row-start: 2;
grid-row-end: 5;

3️⃣ grid-area

Defines an item’s area using line numbers or named areas.

grid-area: header;

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

4️⃣ justify-self

Aligns an item horizontally inside its cell.

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

5️⃣ align-self

Aligns an item vertically inside its cell.

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

6️⃣ place-self

Shortcut for align-self + justify-self.

place-self: center;

🧭 Alignment Properties (Container-Wide)

These control how the entire grid or its items are aligned.

1️⃣ justify-items

Align items horizontally inside their grid cells.

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

2️⃣ align-items

Align items vertically inside cells.

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

3️⃣ place-items

Shorthand for align-items + justify-items.

place-items: center;

4️⃣ justify-content

Aligns the grid *as a whole* horizontally inside the container.

justify-content: start | center | end | space-between | space-around | space-evenly;

5️⃣ align-content

Aligns the grid *as a whole* vertically inside the container.

align-content: start | center | end | space-between | space-around | space-evenly;

6️⃣ place-content

Short for align-content + justify-content.

place-content: center;

🧩 Additional Useful Functions

🔹 repeat()

Repeats track patterns.

grid-template-columns: repeat(3, 1fr);

🔹 minmax(min, max)

Creates a track that grows within limits.

grid-template-columns: minmax(200px, 1fr);

🔹 auto-fit vs auto-fill

Helps create responsive layouts without media queries.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

🔥 Summary

Grid Properties are the foundation of CSS Grid layout. They control structure, placement, alignment, and responsiveness. Mastering these properties allows you to create clean, scalable, and visually powerful UI layouts with minimal code.

Explore more onMDN Documentation 📘