CSS Grid Item

Control individual grid items with precision

🎯 What is a Grid Item?

Grid items are the direct children of a grid container. You can control their placement, size, and alignment using grid item properties like grid-column , grid-row , and alignment properties. 


.grid-item {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  justify-self: center;
  align-self: start;
}

Output:

1
Positioned Item
3
4

Essential Grid Item Properties

📍

grid-column

Controls column placement 

.item {
  grid-column: 2 / 4;
}
📌

grid-row

Controls row placement 

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

grid-area

Shorthand for placement 

.item {
  grid-area: 1 / 2 / 3 / 4;
}
⚖️

justify-self

Horizontal alignment 

.item {
  justify-self: center;
}

🔹 Grid Item Positioning

Positioning items with CSS Grid lines provides pixel-perfect control over placement. Each grid line is numbered starting from 1, and you can place items by specifying start and end lines using properties like grid-column-start and grid-row-end. For instance, grid-column: 2 / 4; spans an item from column line 2 to line 4. This method is powerful for creating complex, non-linear layouts without altering HTML structure, ensuring visual consistency across different screen sizes. 

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.header {
  grid-column: 1 / -1; /* Span all columns */
  background-color: #007acc;
  color: white;
}

.sidebar {
  grid-row: 2 / 4; /* Span 2 rows */
  background-color: #28a745;
  color: white;
}

.main-content {
  grid-column: 2 / -1;
  grid-row: 2;
  background-color: #ffc107;
}

Output:

Header
Sidebar
Main Content
Footer

🔹 Grid Item Alignment

Align individual grid items within their assigned areas using justify-self and align-self. These properties control horizontal and vertical alignment, respectively, overriding the container's justify-items and align-items. Values like start, end, center, and stretch fine-tune positioning. For example, align-self: center; vertically centers an item. This granular control is essential for polished interfaces where specific elements need unique alignment without affecting others. 

.alignment-grid {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(2, 120px);
  gap: 15px;
}

.item-1 {
  justify-self: start;
  align-self: start;
  background-color: #ff6b6b;
}

.item-2 {
  justify-self: center;
  align-self: center;
  background-color: #4ecdc4;
}

.item-3 {
  justify-self: end;
  align-self: end;
  background-color: #45b7d1;
}

Output:

Start
Center
End
Normal
Normal
Normal

🔹 Spanning Multiple Cells

Make grid items span across multiple rows or columns using the span keyword or line ranges. For example, grid-column: span 2; makes an item cover two columns, while grid-row: 1 / 3; spans from row line 1 to 3. This technique is crucial for creating featured content areas, banners, or asymmetric layouts. It enhances visual hierarchy and optimizes space without extra HTML markup, keeping code semantic and responsive across devices. 

.spanning-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 80px);
  gap: 10px;
}

.span-item {
  grid-column: span 2; /* Span 2 columns */
  grid-row: span 2;    /* Span 2 rows */
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

Output:

1
Spanning Item
4
5
6
7
8
9

🧠 Test Your Knowledge

Which property makes a grid item span 3 columns?