How to color every other row using CSS Grid

When working with CSS Grid, if you want to achieve an alternating row background coloring effect, you can accomplish this using straightforward CSS selectors. This approach is not only concise but also highly maintainable. I will demonstrate this with a specific example.

Suppose you have a grid container containing multiple row elements, and you wish to apply different background colors to every other row. Here is the CSS code to achieve this:

css
/* Setting the grid container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three columns */
  grid-gap: 10px; /* Grid spacing */
}

/* Default background color */
.grid-item {
  padding: 20px;
  border: 1px solid #ccc;
}

/* Alternating row background color */
.grid-item:nth-child(odd) {
  background-color: #f2f2f2;
}

Next, the HTML implementation:

html
<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 class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <!-- Additional items -->
</div>

In this example, the .grid-item:nth-child(odd) selector targets all odd-indexed child elements (e.g., the 1st, 3rd, 5th, etc.), applying the background color #f2f2f2. This results in every other row displaying a distinct background color, achieving the desired effect.

The key advantage of this method is its simplicity and ease of understanding, while the :nth-child() selector provides significant flexibility. You can customize the selector logic to accommodate various styling requirements.