🧩 CSS Grid Layout (Full Guide)

Last Updated: November 2025

CSS Grid is a two-dimensional layout system for creating rows and columns easily.
It is perfect for complex layouts like dashboards, galleries, or web pages with multiple sections.

🗣 Hinglish Tip: Flexbox ek direction (row/column) me layout karta hai, jabki Grid dono (row + column) me control deta hai.

To use Grid, set the parent container’s display to grid.

.container {
  display: grid;
}

All its direct children become grid items.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Grid Container Properties

These control the layout of the grid.

Property	Description	Example
display	Defines a grid container	display: grid;
grid-template-columns	Defines the number & size of columns	grid-template-columns: 200px 1fr 2fr;
grid-template-rows	Defines the number & size of rows	grid-template-rows: 100px auto 50px;
gap	Sets spacing between rows and columns	gap: 10px;
row-gap	Vertical space between rows	row-gap: 20px;
column-gap	Horizontal space between columns	column-gap: 15px;
justify-items	Aligns items horizontally inside their cell	justify-items: center;
align-items	Aligns items vertically inside their cell	align-items: center;
justify-content	Aligns the grid as a whole horizontally	justify-content: space-around;
align-content	Aligns the grid as a whole vertically	align-content: center;
grid-template-areas	Names specific areas of the layout	grid-template-areas: "header header" "sidebar main" "footer footer";

Example: Basic Grid Layout

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px;
  gap: 10px;
}
.item {
  background-color: lightcoral;
  padding: 20px;
  font-size: 20px;
  text-align: center;
}

🗣 Hinglish Tip: fr ka matlab hota hai “fraction” — available space ka proportion.

🎯 Grid Item Properties

These properties control how individual grid items behave inside the grid.

Property	Description	Example
grid-column-start	Defines the column line where the item starts	grid-column-start: 1;
grid-column-end	Defines the column line where the item ends	grid-column-end: 3;
grid-row-start	Defines the row line where the item starts	grid-row-start: 1;
grid-row-end	Defines the row line where the item ends	grid-row-end: 2;
grid-column	Shorthand for start/end	grid-column: 1 / 3;
grid-row	Shorthand for start/end	grid-row: 1 / 2;
justify-self	Aligns item horizontally inside its grid cell	justify-self: center;
align-self	Aligns item vertically inside its grid cell	align-self: end;
grid-area	Places item in a named grid area	grid-area: header;

Example: Grid Item Properties

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
  gap: 10px;
}
.item1 {
  background-color: lightgreen;
  grid-column: 1 / 3;
}
.item2 {
  background-color: lightblue;
  grid-row: 1 / 3;
}
.item3 {
  background-color: lightcoral;
  justify-self: center;
}

🗣 Hinglish Tip: Grid me har cell ek coordinate system hota hai — column aur row numbers se items ko place karte hain.

💡 Shorthand Properties

Shorthand	Expands To	Example
grid	Combines grid-template and grid-auto properties	grid: auto / 1fr 1fr;
grid-column	grid-column-start + grid-column-end	grid-column: 1 / 3;
grid-row	grid-row-start + grid-row-end	grid-row: 2 / 4;

Hinglish Tip: grid-template-areas se layout banana bahut visual aur readable hota hai — jaise table ke boxes.

← Previous Next →