How to Create a Responsive Checkerboard Background in CSS

How to create a responsive checkerboard background in CSS?

Here is an idea that rely on conic-gradient:

.chess {
  background:
    repeating-conic-gradient(
        #fff 0 90deg,
        grey 0 180deg) 
    0 0/25% 25%;
  margin: 15px;
  padding:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

CSS gradient checkerboard pattern

Just modify the background-position like in the below snippet to get the required output. This works fine in Firefox, Chrome, Opera, IE11 and Edge.

body {

  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size: 20px 20px;

  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

}

Checkerboard CSS pattern bug (diagonal unaesthetic line)

I've found a workaround by using inline-svg into css.

Works with all Windows browsers, and Android browsers, but i'm not secure that this works with OSX (MAC).

.testcheckerboard{

  width: 200px;

  height: 100px;

  background-size: 40px 40px;

  background-color: white;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(0,0,0)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");

}

<div class="testcheckerboard"></div>

How do I make a responsive grid with a checkered pattern?

If you know the number of rows or you know at least their max value you can easily achieve this using gradient and multiple background. The only drawback is that the coloration will be on the container so you can have empty cells colored too.

.grid {
  display: grid;
  margin:10px 0;
  counter-reset: spans;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-auto-rows: 40px;
  --grad:repeating-linear-gradient(to right,red 0 calc(50% / var(--cols)),blue calc(50% / var(--cols))  calc(100% / var(--cols)));
  background:
    var(--grad),
    var(--grad),
    var(--grad),
    var(--grad),
    var(--grad);
  background-size:200% 40px;
  background-position: 
    0                        calc(0*40px),
    calc(100% / var(--cols)) calc(1*40px),
    0                        calc(2*40px),
    calc(100% / var(--cols)) calc(3*40px),
    0                        calc(4*40px);
  background-repeat:no-repeat;
}

.grid > * {
  counter-increment: spans;
  text-align: center;
  padding: 10px 0;
  color: #fff;
}

.grid > *::after {
  content: counter(spans);
}

<div class="grid" style="--cols: 5;">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="grid" style="--cols: 4;">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="grid" style="--cols: 8;">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Make a dynamic checkerboard responsive to user input jQuery

What about a boolean flag to determine where you're at to assign a class?

First, declare a boolean variable inside of your "Create" button click handler:

var toggleFlag = true;

Then, in your for loop where you "count" the amount of td in each row, you can assign a class right away:

//for each row add z number of td's
for (var j = 0; j < z; j++) {
    if(toggleFlag){
        array[i].append('<td class="odd"></td>');
    }else{
        array[i].append('<td class="even"></td>');
    }
    // Toggle the flag for next iteration
    toggleFlag=!toggleFlag;
}

As soon as this loop is finished, check if you are supposed to have an odd or even amount of td on each row... Because if it is odd, you have to toggle again:

// If rows contain an even amout of td, toggle again before looping to next row
if(z % 2 == 0){
    toggleFlag=!toggleFlag;
}

And finally, when you hit the "Let's play" button to add the pieces, you can select td using the odd class instead of the :odd or :even selector.

$('#gameBoard tr:nth-last-child(3) td.odd').append('<div class="gamePiece">')

See this working CodePen
;)

---

EDIT to explain the initial error

The error you have in your code is located in these lines:

$('.trOdd td:odd').css('background-color', 'black'); 
$('.trOdd td:even').css('background-color', 'white'); 
$('.trEven td:odd').css('background-color', 'white');
$('.trEven td:even').css('background-color', 'black'); 

This logic is good for an even amount of squares.

But with an odd amount, you fatally get an offset of one.

This is what is making this "two by two" row grouping effect.

So you'd have to have an "alternated logic" of this code block... at each row.

Which is not quite simple.

That's why I took the problem from sooner in the code by assigning the classes in the loop that cycle the tds one by one.

Just to illustrate it, I've made another CodePen.

It shows clearly that this selector $('.trOdd td:odd') selects ALL td that has the odd class in an odd tr... But not only on one row! like I'm sure you were thinking... It doesn't get the rows one by one like a human would. It grabs all the table to collect matching elements.

See?
For jQuery, there is only two rows (trOdd and trEven)...

;)

---

Related Topics