Try Cloud Hosting with DigitalOcean and get $200 credit.

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 : learn code with durgesh images

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 :

learn code with durgesh images

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 :

learn code with durgesh images

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 :

learn code with durgesh images

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

CSS Handbook

CSS Handbook

CSS Grid Items

CSS Grid Items

What Are CSS Grid Items?

Controlling Columns

Controlling Rows

The `grid-area` Property

Naming Grid Items with `grid-area`

Aligning Grid Items

Reordering Grid Items

CSS Grid Item Properties

CSS Grid Items

CSS Grid Items

What Are CSS Grid Items?

Controlling Columns

Controlling Rows

The `grid-area` Property

Naming Grid Items with `grid-area`

Aligning Grid Items

Reordering Grid Items

CSS Grid Item Properties

CSS Grid Items

CSS Grid Items

What Are CSS Grid Items?

Controlling Columns

Controlling Rows

The grid-area Property

Naming Grid Items with grid-area

Aligning Grid Items

Reordering Grid Items

CSS Grid Item Properties

CSS Grid Items

CSS Grid Items

What Are CSS Grid Items?

Controlling Columns

Controlling Rows

The grid-area Property

Naming Grid Items with grid-area

Aligning Grid Items

Reordering Grid Items

CSS Grid Item Properties

The `grid-area` Property

Naming Grid Items with `grid-area`

The `grid-area` Property

Naming Grid Items with `grid-area`