Календарь с помощью CSS-grid в несколько строк кода

Сетка календаря выглядит, как идеальный кандидат для использования CSS-grid. Ниже рассмотрим пример, как можно сделать разметку для календарика с помощью всего нескольких строк кода. В итоге должно получиться так:

Начать следует с HTML-разметки:

<div class="days-of-week-container">
      <div>Mo</div>
      <!-- список дней недели -->
      <div>Su</div>
</div>
<div class="calendar-container">
  <div>1</div>
  <!-- список чисел месяца -->
  <div>31</div>
</div>

В нормальных условиях обычно не приходится вручную писать все числа <div>1...31</div>. Эта часть легко может быть сгенерирована с помощью Javascript в браузере или сервером, поэтому для примера будет использоваться только HTML и CSS.

В разметке будут две части: контейнер для дней недели .days-of-week-container и контейнер для чисел месяца .calendar-container. Оба будут реализованы с помощью CSS-grid, а текст будет выравниваться по правому краю:

.days-of-week-container,
.calendar-container {
  display: grid;
  text-align: right;
}

Теперь, если посмотреть на сетку, станет ясно, что здесь будет 7 колонок, поэтому первое, что приходит в голову, написать как-то вроде:

grid-template-columns: 30px 30px 30px 30px 30px 30px 30px;

Но это слишком примитивно и некрасиво, поэтому для настройки наших колонок будем использовать repeat:

grid-template-columns: repeat(7, 30px);

Теперь, дни недели и сам календарь на месяц будут располагаться в макете сетки, состоящей из 7 колонок.

See this code CSS-grid calendar on x.xhtml.ru.

Что делать, если месяц должен начинаться не в понедельник, а например, в пятницу? Достаточно использовать CSS-свойство grid-column и переместить первый день месяца в колонку любого дня недели в календаре, а автоматическое размещение позаботится обо всем остальном.

.calendar-container div:first-child {
  grid-column: 5;
}

See this code Calendar with starting date on x.xhtml.ru.

Для установки значения grid-column можно использовать настраиваемые CSS-свойства и управлять расположением первого дня месяца из Javascript. Как это сделать, можно посмотреть на странице о передаче данных между CSS и JavaScript с помощью CSS-переменных.

Это всё, что требуется для реализации простого макета календаря: CSS-grid и всего несколько строк кода.

Four lines of CSS to make a calendar layout with CSS grid.