I have a full width div which contains a dynmic grid of posts. The number of columns depends on the screen width, the number of rows depends on the number of posts.
I would like to have an alternating background color (full width) for each row, even though the grid of posts itself will not stretch to full width (rather to something like 1200px).
Since the grid itself is not 100% screen width and the rows are not wrapped, I don't see a way to add these alternating background colors.
I've thought of setting a gradient (white/grey/white/grey/etc) background using jQuery, depending on the height of the container div, but since that height will vary also depending on the screen width, it's not a solution.
Does anyone have an idea how to get an alternating background per row in this dynamic situation?
Here is some sample code to describe what I'm working with:
.container { width:100%; }.post-grid { width:100%; max-width:1200px; display:grid; grid-template-columns:repeat(4, 1fr); gap:3rem;@media only screen and (max-width: 1000px) { .post-grid { grid-template-columns:repeat(3, 1fr); }}@media only screen and (max-width: 768px) { .post-grid { grid-template-columns:repeat(2, 1fr); }}`@media only screen and (max-width: 480px) { .post-grid { grid-template-columns:repeat(1, 1fr); }}
<div class="container"><div class="post-grid"><article="post">post 1</article><article="post">post 2</article><article="post">post 3</article><article="post">post 4</article> <article="post">post 5</article><article="post">post 6</article><article="post">post 7</article><article="post">post 8</article> </div></div>
goal:post-grid row 1: white backgroundpost-grid row 2: grey backgroundpost-grid row 3: white backgroundpost-grid row 4: grey backgroundetc.
Attempted solutions:
- tried gradient background. but impossible due to varying container height depending on screen width.
- managed alternating background when container + post-grid div full width. but then the posts are spread too far apart. I need the posts within the grid to take up no more than 1200px width in total.
- background set per article/.post. but that leaves the gaps inbetween and at the left and right outsides without a background.