How to Use grid-row and grid-column Alignment in CSS Grid?

CSS Grid is a powerful layout tool that allows you to create responsive, complex layouts with minimal code. While Flexbox is often used for one-dimensional layouts, CSS Grid is ideal for two-dimensional layouts, allowing precise control over both rows and columns. In this guide, we’ll focus on how to align items within a grid using properties such as grid-row, grid-column, align-items, and justify-items. These properties help control the positioning of items within their cells and across the grid.

Let’s dive into how to use grid-row and grid-column for alignment in CSS Grid layouts.

---

1. Setting Up CSS Grid

To begin, we need a container with display: grid to enable CSS Grid. Then, we define rows and columns using the grid-template-rows and grid-template-columns properties, respectively. Here’s a quick example of setting up a grid layout:

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

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

This setup gives us a 3×2 grid (3 columns, 2 rows), with equal-sized rows and columns. Now we can look into how to align individual grid items within this layout.

---

2. Understanding grid-row and grid-column

The grid-row and grid-column properties help specify where an item should appear in the grid. Each property has two shorthand notations:

• grid-row: Defines which row(s) an item should span.
• grid-column: Defines which column(s) an item should span.

The syntax is straightforward:

.item1 {
  grid-row: 1 / 3;       /* Spans rows 1 to 3 */
  grid-column: 1 / 2;    /* Spans column 1 */
}

In this example:

• grid-row: 1 / 3 means that the item will span from row 1 to row 3 (covering two rows).
• grid-column: 1 / 2 means that the item will only occupy the first column.

3. Aligning Items within Rows and Columns

Once you’ve positioned items with grid-row and grid-column, you can use alignment properties to control their position within their cells. CSS Grid offers two main alignment properties:

• align-items: Controls vertical alignment within the grid container.
• justify-items: Controls horizontal alignment within the grid container.

These properties can be set on the grid container itself to apply alignment to all items, or they can be used individually on specific grid items for custom alignment.

Example of Global Alignment with align-items and justify-items

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 200px;
  align-items: center;        /* Vertically centers items in each cell */
  justify-items: center;      /* Horizontally centers items in each cell */
}

Here:

• align-items: center aligns items vertically to the center of their cells.
• justify-items: center aligns items horizontally to the center of their cells.

This ensures that all items in the grid are centered within their respective cells.

---

4. Aligning Individual Grid Items

In some cases, you may want individual grid items to have unique alignment settings. You can apply align-self and justify-self properties directly to specific grid items.

Example of Individual Item Alignment

.item1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  align-self: start;      /* Aligns item to the top of its cell */
  justify-self: start;    /* Aligns item to the left of its cell */
}

.item2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  align-self: end;        /* Aligns item to the bottom of its cell */
  justify-self: end;      /* Aligns item to the right of its cell */
}

In this example:

• .item1 aligns to the top-left corner of its cell, thanks to align-self: start and justify-self: start.
• .item2 aligns to the bottom-right corner of its cell, using align-self: end and justify-self: end.

This method provides fine-grained control over individual item alignment within the grid.

---

5. Span Multiple Rows and Columns with grid-row and grid-column

To create unique layouts, you may want certain items to span multiple rows or columns. This is where grid-row and grid-column really shine.

Example: Spanning Rows and Columns

.item1 {
  grid-row: 1 / 3;         /* Spans from row 1 to row 3 */
  grid-column: 1 / 3;      /* Spans from column 1 to column 3 */
  align-self: center;      /* Centers vertically within the spanned area */
  justify-self: center;    /* Centers horizontally within the spanned area */
}

.item2 {
  grid-row: 1 / 2;
  grid-column: 3 / 4;      /* Only occupies the third column in the first row */
}

In this example:

• .item1 spans two rows and two columns, creating a larger cell area for itself.
• .item2 remains in a single cell, occupying only the third column of the first row.

This kind of layout is particularly useful when you want to highlight certain elements, such as a featured post or image in a gallery layout.

---

6. Responsive Layouts with CSS Grid

CSS Grid makes it simple to create responsive layouts. You can use media queries to adjust grid-template-rows, grid-template-columns, and alignment properties to match different screen sizes.

Example of Responsive Grid with Alignment

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px;
  gap: 10px;
  align-items: center;
  justify-items: center;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* Stacks items in a single column */
  }
}

In this example:

• On screens smaller than 768px, the grid switches to a single-column layout.
• Alignment properties such as align-items and justify-items remain effective, keeping items centered regardless of the screen size.

This responsive design approach allows for layouts that adjust to various devices while maintaining consistent alignment.

---

Summary

CSS Grid offers powerful properties for aligning items both globally and individually. Here’s a quick recap of key techniques for using grid-row, grid-column, and alignment properties in CSS Grid:

1. Basic Setup: Use display: grid, grid-template-columns, and grid-template-rows to define your grid structure.
2. Positioning Items: Use grid-row and grid-column to specify where items should appear in the grid.
3. Aligning All Items: Use align-items and justify-items on the container for global alignment of all grid items.
4. Aligning Individual Items: Use align-self and justify-self on specific items for unique alignment within their cells.
5. Responsive Design: Adjust grid layout and alignment properties with media queries to create responsive designs.

Using these techniques, you can build flexible, responsive grid layouts that look polished and professional on any device. CSS Grid’s alignment properties provide all the tools needed for precise control over item positioning within both simple and complex layouts.