Как получить квадраты в квадратах с CSS?

Question

Я пытаюсь создать фон для своего проекта. Когда я использую ниже css

.srd-demo-canvas {
  background-size: 24px 24px;
  background-image:
    linear-gradient(to right,  rgba(0, 0, 0, 0.15) 1px, transparent 2px),
    linear-gradient(to bottom,  rgba(0, 0, 0, 0.15) 1px, transparent 2px);
}

, я получаю следующее представление:

Однако я хочу фон который имеет несколько больших квадратов и имеет несколько маленьких квадратов, что-то вроде следующего:

Что я должен добавить или удалить к своему CSS коду?

Answer 1

Вы можете изменить его следующим образом, используя 4 линейных градиента:

body {
  background-size: 72px 72px, 72px 72px, 24px 24px, 24px 24px;
  background-image: linear-gradient(rgba(0, 0, 0, .5) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 0, 0, .5) 2px, transparent 2px), linear-gradient(rgba(0, 0, 0, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .25) 1px, transparent 1px);
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}