CSS Grid Items

CSS Grid is a modern layout system that allows you to create responsive, structured, and flexible web designs. While the grid container defines the structure, grid items are the building blocks that occupy space inside the grid. Understanding grid items lets you control position, span, alignment, and order of each element.

What Are CSS Grid Items?

A grid item is any direct child of a grid container. By default, each item occupies one cell in the grid. You can style items to span multiple rows or columns and align individually within their grid area.

HTML Example:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

CSS Example:

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

.grid-container div {
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}

Output :

Controlling Columns

grid-column-start and grid-column-end

These properties define where a grid item starts and ends horizontally. This lets you control how many columns an item spans and its exact horizontal placement.

HTML Example:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
  <div class="item6">Item 6</div>
  <div class="item7">Item 7</div>
  <div class="item8">Item 8</div>
  <div class="item9">Item 9</div>
  <div class="item10">Item 10</div>
</div>

CSS Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  gap: 10px;
  padding: 10px;
}

/* Simple styling for all items */
.grid-container div {
  padding: 20px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
}

/* Column placement and spans */
.item1 { grid-column: 1 / 3; background-color: #f8b400; }  /* spans 2 columns */
.item2 { grid-column: 3 / 4; background-color: #4caf50; }  /* spans 1 column */
.item3 { grid-column: 4 / 6; background-color: #2196f3; }  /* spans 2 columns */
.item4 { grid-column: 1 / 2; background-color: #e91e63; }  /* spans 1 column */
.item5 { grid-column: 2 / 4; background-color: #9c27b0; }  /* spans 2 columns */
.item6 { grid-column: 4 / 5; background-color: #ff5722; }  /* spans 1 column */
.item7 { grid-column: 5 / 6; background-color: #03a9f4; }  /* spans 1 column */
.item8 { grid-column: 1 / 3; background-color: #8bc34a; }  /* spans 2 columns */
.item9 { grid-column: 3 / 5; background-color: #ffc107; }  /* spans 2 columns */
.item10 { grid-column: 5 / 6; background-color: #673ab7; } /* spans 1 column */

Output :

grid-column (Shorthand)

grid-column is a shorthand for grid-column-start and grid-column-end. You can use line numbers or span to define the number of columns an item should cover.

HTML Example:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

CSS Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  gap: 10px;
  padding: 10px;
}

/* Grid items */
.item1 {
  grid-column: 1 / span 2; /* starts at column 1, spans 2 columns (1 & 2) */
  background-color: #f8b400;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.item2 {
  grid-column: 3 / 5; /* starts at column 3, spans 2 columns (3 & 4) */
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.item3 {
  grid-column: 1 / 2; /* starts at column 1, spans 1 column */
  background-color: #2196f3;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.item4 {
  grid-column: 2 / 4; /* starts at column 2, spans 2 columns (2 & 3) */
  background-color: #e91e63;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.item5 {
  grid-column: 4 / 5; /* starts at column 4, spans 1 column */
  background-color: #9c27b0;
  padding: 20px;
  text-align: center;
  color: #fff;
}

Controlling Rows

grid-row-start and grid-row-end

These properties define where a grid item starts and ends vertically, allowing you to control the vertical span of an item.

HTML Example:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
  <div class="item6">Item 6</div>
  <div class="item7">Item 7</div>
  <div class="item8">Item 8</div>
  <div class="item9">Item 9</div>
  <div class="item10">Item 10</div>
</div>

CSS Example:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: repeat(5, 100px); /* 5 rows of 100px each */
  gap: 10px;
  padding: 10px;
}

/* Item placements with row and column spans */
.item1 {
  grid-row: 1 / span 2;   /* spans rows 1-2 */
  grid-column: 1 / 3;     /* spans columns 1-2 */
  background-color: #f8b400;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item2 {
  grid-row: 1 / 2;        /* row 1 */
  grid-column: 3 / 5;     /* columns 3-4 */
  background-color: #4caf50;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item3 {
  grid-row: 2 / 3;        /* row 2 */
  grid-column: 3 / 4;     /* column 3 */
  background-color: #2196f3;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item4 {
  grid-row: 2 / 4;        /* rows 2-3 */
  grid-column: 4 / 5;     /* column 4 */
  background-color: #e91e63;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item5 {
  grid-row: 3 / 4;        /* row 3 */
  grid-column: 1 / 2;     /* column 1 */
  background-color: #9c27b0;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item6 {
  grid-row: 3 / 5;        /* rows 3-4 */
  grid-column: 2 / 4;     /* columns 2-3 */
  background-color: #ff5722;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item7 {
  grid-row: 4 / 5;        /* row 4 */
  grid-column: 1 / 2;     /* column 1 */
  background-color: #03a9f4;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item8 {
  grid-row: 4 / 6;        /* rows 4-5 */
  grid-column: 4 / 5;     /* column 4 */
  background-color: #8bc34a;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item9 {
  grid-row: 5 / 6;        /* row 5 */
  grid-column: 1 / 3;     /* columns 1-2 */
  background-color: #ffc107;
  text-align: center;
  color: #fff;
  padding: 10px;
}

.item10 {
  grid-row: 5 / 6;        /* row 5 */
  grid-column: 3 / 4;     /* column 3 */
  background-color: #673ab7;
  text-align: center;
  color: #fff;
  padding: 10px;
}

Output :

grid-row (Shorthand)

grid-row is a shorthand for grid-row-start and grid-row-end. You can use line numbers or span to control row span.

HTML Example:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

CSS Example:

.item1 {
  grid-row: 1 / span 2; /* start at row 1, span 2 rows */
}

.item2 {
  grid-row: 2 / 3; /* start at row 2, end before row 3 */
}

---

The grid-area Property

grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. It allows you to position an item in both row and column at once.

HTML Example:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS Example:

.item1 {
  grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
}

Naming Grid Items with grid-area

You can assign names to grid items to use with grid-template-areas:

HTML Example:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="main">Main Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

CSS Example:

/* Grid Container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 equal columns */
  grid-template-rows: auto 1fr auto;     /* header/footer auto, middle row flexible */
  gap: 10px;                             /* spacing between items */
  grid-template-areas:
    "header header header header header header"
    "menu main main main main sidebar"
    "menu footer footer footer footer footer";
  padding: 10px;
  background-color: #f5f5f5;
}

/* Grid Items */
.header {
  grid-area: header;
  background-color: #f8b400;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 1.5rem;
  color: #fff;
}

.menu {
  grid-area: menu;
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.main {
  grid-area: main;
  background-color: #2196f3;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e91e63;
  padding: 20px;
  text-align: center;
  color: #fff;
}

.footer {
  grid-area: footer;
  background-color: #9c27b0;
  padding: 20px;
  text-align: center;
  color: #fff;
}

/* Optional: Responsive adjustment */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* single column layout */
    grid-template-areas:
      "header"
      "menu"
      "main"
      "sidebar"
      "footer";
  }
}

Output :

Aligning Grid Items

justify-self (Horizontal alignment)

Aligns content horizontally within the grid cell:

<div class="grid-container">
  <div class="item1">Item 1</div>
</div>

.item1 {
  justify-self: end; /* aligns content to the right horizontally */
}

align-self (Vertical alignment)

Aligns content vertically within the grid cell:

.item1 {
  align-self: center; /* aligns content vertically to center */
}

place-self (Shorthand)

.item1 {
  place-self: start end; /* vertical start, horizontal end */
}

Reordering Grid Items

Grid items can be displayed in a different order than their HTML source, which is useful for responsive layouts.

HTML Example:

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
</div>

CSS Example:

.item1 { grid-area: 1 / 3; }
.item2 { grid-area: 2 / 1; }
.item3 { grid-area: 1 / 1; }

Responsive Reordering with Media Queries:

@media (max-width: 500px) {
  .item1 { grid-area: 1 / span 2; }
  .item2 { grid-area: 2 / 1; }
  .item3 { grid-area: 2 / 2; }
}

CSS Grid Item Properties

Property	Description
align-self	Aligns content vertically in a grid item
justify-self	Aligns content horizontally in a grid item
place-self	Shorthand for align-self + justify-self
grid-area	Shorthand for row/column start/end
grid-column	Shorthand for grid-column-start and grid-column-end
grid-column-start	Specifies where the grid item starts horizontally
grid-column-end	Specifies where the grid item ends horizontally
grid-row	Shorthand for grid-row-start and grid-row-end
grid-row-start	Specifies where the grid item starts vertically
grid-row-end	Specifies where the grid item ends vertically