CSS Grid Item

In CSS Grid, the child elements of a grid container are called grid items. These items are automatically placed in the rows and columns of the grid defined by the grid container’s properties. Grid items can be controlled individually or in groups, allowing for highly customizable layouts.

In this guide, you’ll learn how to control the placement, size, and alignment of grid items within a grid container.

How to Create Grid Items

To turn elements into grid items, they must be direct children of a grid container (an element with display: grid or display: inline-grid).

Example:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 3 columns of equal width */
  grid-template-rows: 100px 100px;         /* 2 rows of equal height */
}

In this example:

  • The grid-container defines a grid with 3 columns and 2 rows.
  • Each child <div> inside the container becomes a grid item.

Grid Item Placement

Grid items can be explicitly placed within the grid using properties like grid-column and grid-row. These properties allow you to specify where each item should start and how many grid cells it should span.

1. grid-column

Defines the horizontal placement of a grid item.

Syntax:

grid-column: start / end;
  • start: The starting grid line (column).
  • end: The ending grid line (column).

Example:

.grid-item {
  grid-column: 1 / 3; /* Spans from column 1 to column 3 */
}

2. grid-row

Defines the vertical placement of a grid item.

Syntax:

grid-row: start / end;
  • start: The starting grid line (row).
  • end: The ending grid line (row).

Example:

.grid-item {
  grid-row: 2 / 3; /* Spans from row 2 to row 3 */
}

Spanning Multiple Rows or Columns

Grid items can span multiple rows or columns using grid-column or grid-row values.

Example:

.grid-item {
  grid-column: 1 / 4; /* Spans 3 columns */
  grid-row: 1 / 3;    /* Spans 2 rows */
}

This makes the grid item larger by occupying multiple grid cells.

Aligning Grid Items

You can align grid items horizontally and vertically within their cells using justify-self and align-self.

1. justify-self: Horizontal alignment

Aligns a grid item horizontally within its cell.

Values:

  • start: Align to the left.
  • center: Center horizontally.
  • end: Align to the right.
  • stretch: Stretch to fill the cell (default).

Example:

.grid-item {
  justify-self: center;
}

2. align-self: Vertical alignment

Aligns a grid item vertically within its cell.

Values:

  • start: Align to the top.
  • center: Center vertically.
  • end: Align to the bottom.
  • stretch: Stretch to fill the cell (default).

Example:

.grid-item {
  align-self: start;
}

Grid Item Shorthand: grid-area

The grid-area property combines both grid-row and grid-column into a single shorthand property.

Syntax:

grid-area: row-start / column-start / row-end / column-end;

Example:

.grid-item {
  grid-area: 1 / 2 / 3 / 4; /* Row 1 to 3, Column 2 to 4 */
}

Automatic Placement of Grid Items

By default, grid items are placed into the grid in the order they appear in the HTML. However, you can control automatic placement behavior with the following properties:

1. grid-auto-flow

Controls how grid items are automatically placed when no explicit placement is defined.

Values:

  • row (default): Items are placed in rows.
  • column: Items are placed in columns.
  • dense: Fills gaps in the grid, placing items in available spaces.

Example:

.grid-container {
  grid-auto-flow: column;
}

2. Implicit Grid Tracks

When grid items exceed the defined rows/columns, additional tracks are automatically created. You can control their size using grid-auto-rows and grid-auto-columns.

Example:

.grid-container {
  grid-auto-rows: 100px;
  grid-auto-columns: 200px;
}

Practical Example: Custom Grid Item Placement

HTML:

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

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-template-rows: repeat(2, 100px); /* 2 rows, 100px each */
  gap: 10px; /* Gap between items */
}

.grid-item:nth-child(1) {
  grid-column: 1 / 3; /* Span 2 columns */
  grid-row: 1 / 2;    /* Occupy 1 row */
}

.grid-item:nth-child(4) {
  grid-column: 2 / 4; /* Span 2 columns */
  grid-row: 2 / 3;    /* Occupy 1 row */
}

Result:

  • Item 1 spans the first two columns in the first row.
  • Item 4 spans the last two columns in the second row.
  • Other items are placed automatically.

Conclusion

The CSS Grid Item properties give you powerful tools to create complex and precise layouts. Whether you want items to span multiple rows/columns or align them in specific ways, CSS Grid provides unmatched flexibility for modern web design.

For more CSS tutorials and tips, visit The Coding College. Stay ahead with responsive, scalable layouts powered by CSS Grid!

Leave a Comment