Responsive checkerboard grid in CSS? - css

Question

This snippet contains a responsive grid. As you change the screen width the number of columns varies automatically. Sometimes there is an even number of columns, sometimes there is an odd number. When there is an odd number of columns, the cells alternate colours like a checkerboard, but when there is an even number of columns, they do not. Is there any way to achieve the checkerboard effect for even numbers of columns as well as odd numbers? Does it require Javascript, or can it be done using CSS alone?
body {
margin: 0;
}
.checkers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
padding: 1em;
gap: 1em;
}
.checkers>div {
background-color: red;
aspect-ratio: 1/1;
}
.checkers>div:nth-child(even) {
background-color: blue;
}
<div class="checkers">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 1

If you can omit the use of 1fr and consider fixed width elements, you can do this using some background trick:
.checkers {
display: grid;
grid-template-columns: repeat(auto-fit, 8em);
padding: 1em;
gap: 1em;
position: relative; /* Relative on the main container */
z-index:0;
}
.checkers > div {
aspect-ratio: 1;
clip-path: inset(0); /* clip the pseudo element to element*/
}
.checkers > div:before {
content:"";
position: absolute;
z-index:-1;
inset: 1em; /* same as padding */
/* create a checkboard pattern using gradient
18em = (8em + 1em[gap])*2
*/
background: repeating-conic-gradient(red 0 25%,blue 0 50%) 0 0/18em 18em;
}
body {
margin: 0;
background: pink;
counter-reset: num;
}
.checkers div:after {
content: counter(num);
counter-increment: num;
color:#fff;
font-weight:900;
font-size: 25px;
}
<div class="checkers">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

Answer 2

As far as I can tell, this cannot be done for an even number of columns. What you can do is ensure there is always an odd number of columns. You will need to explicitly set an odd number of columns for grid-template-columns, which can be adjusted with media queries.
In this snippet I have borrowed the breakpoints from Bootstrap as a starting point. I have initially set the grid to have 3 columns minimum (grid-template-columns: repeat(3, 1fr);), then increment by 2 (next odd number) at each breakpoint up to 13 columns:
body {
margin: 0;
}
.checkers {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 1em;
gap: 1em;
overflow: hidden;
}
.checkers>div {
background-color: red;
aspect-ratio: 1/1;
}
.checkers>div:nth-child(even) {
background-color: blue;
}
#media (min-width: 576px) {
.checkers {
grid-template-columns: repeat(5, 1fr);
}
}
#media (min-width: 768px) {
.checkers {
grid-template-columns: repeat(7, 1fr);
}
}
#media (min-width: 992px) {
.checkers {
grid-template-columns: repeat(9, 1fr);
}
}
#media (min-width: 1200px) {
.checkers {
grid-template-columns: repeat(11, 1fr);
}
}
#media (min-width: 1400px) {
.checkers {
grid-template-columns: repeat(13, 1fr);
}
}
<div class="checkers">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
You can adjust the breakpoint sizes to be multiples of your grid square sizes to get it dialed in to your liking.