Клеточки на CSS

Когда возникает необходимость сделать клеточки как в школьной тетради не используя при этом изображения, первым делом в голову приходят градиенты.

Для этого создадим два повторяющихся градиента, один из которых повернут на 90 градусов:

DIV {
  background:
    repeating-linear-gradient(
        transparent,transparent 20px, yellowgreen 22px
        ),
    repeating-linear-gradient(
        90deg,
        transparent,transparent 20px, yellowgreen 22px
        );
  }

Смотрим что получается: к сожалению, линии отрисовываются как попало, а при изменении размера окна могут совсем пропадать.

Лучше всех с отображением пока справляется Safari, но и в нем ширина линий “плавает”.

Плюс способа: не зависит от размеров контейнера. Минус: некорректное отображение.

Другой способ, который пришел мне в голову — использовать box-shadow.

Конструкция получается довольно громоздкая, потому что приходится использовать псевдо-элементы и для каждого из них прописывать длинный список теней:


.grid-shadow:before,
.grid-shadow:after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  }
.grid-shadow:before {
  right: 0;
  border-top: 1px solid steelblue;
  box-shadow: 0 20px 0 steelblue,
              0 40px 0 steelblue,
              0 60px 0 steelblue,
              0 80px 0 steelblue,
              0 100px 0 steelblue,
              0 120px 0 steelblue,
              0 140px 0 steelblue,
              0 160px 0 steelblue,
              0 180px 0 steelblue,
              0 200px 0 steelblue,
              0 220px 0 steelblue;
  }
.grid-shadow:after {
  bottom: 0;
  border-left: 1px solid steelblue;
  box-shadow: 20px 0 0 steelblue,
              40px 0 0 steelblue,
              60px 0 0 steelblue,
              80px 0 0 steelblue,
              100px 0 0 steelblue,
              120px 0 0 steelblue,
              140px 0 0 steelblue,
              160px 0 0 steelblue,
              180px 0 0 steelblue,
              200px 0 0 steelblue,
              220px 0 0 steelblue,
              240px 0 0 steelblue,
              260px 0 0 steelblue,
              280px 0 0 steelblue,
              300px 0 0 steelblue,
              320px 0 0 steelblue,
              340px 0 0 steelblue,
              360px 0 0 steelblue,
              380px 0 0 steelblue,
              400px 0 0 steelblue,
              420px 0 0 steelblue,
              440px 0 0 steelblue,
              460px 0 0 steelblue,
              480px 0 0 steelblue;
  }

Никакой красоты и многократные повторения. Однако результат во всех браузерах выглядит аккуратно:

Плюс способа: железобетонность, не зависит от изменения размеров окна браузера. Минусы:

  • избыточный код;
  • многократные повторения цвета (неудобно для перекрашивания);
  • зависимость от размеров блока. Можно сделать сетку с запасом по размерам (что ещё больше раздует код) либо использовать только для элементов с фиксированными размерами.

Upd: Свойство background-size легко и изящно решает задачу:

.grid-gradient {
  background:
    linear-gradient(
    mediumvioletred, transparent 1px
    ),
    linear-gradient(
    90deg,
    mediumvioletred, transparent 1px
    );
  background-size: 10px 10px;
  background-position: center center;
  border: 2px solid mediumvioletred;
  }

При этом с помощью background-size можно легко менять размер клеток.

Ссылки по теме:
CSS-градиенты: линейные градиенты
Box shadow
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus