body {
  font: 16px sans-serif;
  display: grid;
  padding: 15px 240px;
  margin: 0;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
  grid-gap: 15px;
  background-color: #fff;
  color: #444;
}

div {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  text-align: center;
}

.invisible {
  visibility: hidden;
}

.faded {
  opacity: 0.5;
}

.checkered {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+CiAgPHJlY3Qgd2lkdGg9IjguNDgiIGhlaWdodD0iOC40OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNiAwKSByb3RhdGUoNDUpIiBmaWxsPSIjZmZmIj48L3JlY3Q+Cjwvc3ZnPg==");
}

.striped {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cGF0aCBkPSJNLTEsMSBsMiwtMgogICAgICAgICAgICAgICAgICBNMCw0IGw0LC00CiAgICAgICAgICAgICAgICAgIE0zLDUgbDIsLTIiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIiB0cmFuc2Zvcm09InNjYWxlKDIgMikiPjwvcGF0aD4KCjwvc3ZnPg==");
}

.dotted {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiI+CiAgPGNpcmNsZSByPSIyIiBjeD0iMCIgY3k9IjAiIGZpbGw9IiNmZmYiPjwvY2lyY2xlPgogIDxjaXJjbGUgcj0iMiIgY3g9IjAiIGN5PSIxMiIgZmlsbD0iI2ZmZiI+PC9jaXJjbGU+CiAgPGNpcmNsZSByPSIyIiBjeD0iMTIiIGN5PSIwIiBmaWxsPSIjZmZmIj48L2NpcmNsZT4KICA8Y2lyY2xlIHI9IjIiIGN4PSIxMiIgY3k9IjEyIiBmaWxsPSIjZmZmIj48L2NpcmNsZT4KICA8Y2lyY2xlIHI9IjIiIGN4PSI2IiBjeT0iNiIgZmlsbD0iI2ZmZiI+PC9jaXJjbGU+Cjwvc3ZnPg==");
}