CSS flex box alternate row colors [duplicate] - css

Question

This question already has answers here:
Zebra striping a flexbox table with wrapping items
(3 answers)
Closed 8 months ago.
When using tables, it is easy to alternate colors in table rows using the nth child selectors (https://stackoverflow.com/a/3084318/1385857). Is there a comparable way to do so when using the flexbox layout. I have the following (from https://philipwalton.github.io/solved-by-flexbox/demos/grids/):
<div class="Grid">
<div class="Grid-cell"></div>
[more divs]
<div class="Grid-cell"></div>
</div>
.Grid
{
display: flex;
flex-wrap: wrap;
}
.Grid-cell
{
flex: 1;
}
Is it possible to alternate row colors in this scenario. To clarify, there are no real rows, only the virtual rows created by flex box due to wrapping.

Answer 1

A bit late but it might help others. Here is a working solution I've just come up with.
It uses the linear-gradient CSS function.
The only downside is that it requires your cells to have a fixed height.
/* $cell_height: 80px */
.grid {
display: flex;
flex-flow: row wrap;
/* this is where the magic is */
background-image: linear-gradient(180deg, red 50%, green 50%);
background-repeat: repeat;
background-size: 100px 160px; /* width is not relevant, but height must be 2*$cell_height */
}
.grid-cell {
height: 80px; /* $cell_height */
/* this is just to have a responsive display for the demo */
width: 25%;
min-width: 250px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="grid">
<div class="grid-cell">1</div>
<div class="grid-cell">2</div>
<div class="grid-cell">3</div>
<div class="grid-cell">4</div>
<div class="grid-cell">5</div>
<div class="grid-cell">6</div>
<div class="grid-cell">7</div>
<div class="grid-cell">8</div>
<div class="grid-cell">9</div>
<div class="grid-cell">10</div>
<div class="grid-cell">11</div>
<div class="grid-cell">12</div>
<div class="grid-cell">13</div>
<div class="grid-cell">14</div>
</div>

Answer 2

This is a super old post, but I guess still relevant as this issue just came up for me where I had to do a static layout that's responsive going from two columns to four, so trying to organize the columns into rows like an actual table didn't make sense. The above answer with the repeating gradient is creative and works great if you can have a fixed height on your items, but the down-voted nth-child selector answer is better with flex-box if your items need to wrap and have flexible heights. I think that answer just needed to be tweaked a bit for the situation.
<div class="list-cols">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
<div>Ten</div>
<div>Eleven</div>
<div>Twelve</div>
<div>Thirteen</div>
<div> </div>
<div> </div>
<div> </div>
</div>
Then adjust your selector for how many columns you have. In this case I've got 4 columns, so the nth-of-type formula selects 1-4, 9-12, etc. In your markup, the number of children needs to be divisible by 4 to make a complete last row, so fill it out with empty divs if necessary.
.list-cols {
display: flex;
flex-wrap: wrap;
}
.list-cols > div {
padding: 8px 12px;
box-sizing: border-box;
flex-basis: 25%;
width: 25%;
}
.list-cols > div:nth-of-type(8n+1),
.list-cols > div:nth-of-type(8n+2),
.list-cols > div:nth-of-type(8n+3),
.list-cols > div:nth-of-type(8n+4) {
background: #f2f2f2;
}

Answer 3

You can use the same technic with nth-child (2n+1, even, odd), or whatever you want.
The display of the element doesn't interfere with that here.
.Grid {
display: flex;
flex-wrap: wrap;
}
.Grid-row {
flex: 1;
}
.Grid-cell:nth-child(2n+1) {
background: pink;
}
<div class="Grid">
<div class="Grid-row">
<div class="Grid-cell">Grid-cell 1</div>
<div class="Grid-cell">Grid-cell 2</div>
<div class="Grid-cell">Grid-cell 3</div>
<div class="Grid-cell">Grid-cell 4</div>
<div class="Grid-cell">Grid-cell 5</div>
<div class="Grid-cell">Grid-cell 6</div>
<div class="Grid-cell">Grid-cell 7</div>
</div>
<div class="Grid-row">
<div class="Grid-cell">Grid-cell 1</div>
<div class="Grid-cell">Grid-cell 2</div>
<div class="Grid-cell">Grid-cell 3</div>
<div class="Grid-cell">Grid-cell 4</div>
<div class="Grid-cell">Grid-cell 5</div>
<div class="Grid-cell">Grid-cell 6</div>
<div class="Grid-cell">Grid-cell 7</div>
</div>
</div>