CSS Grid Kanban Board Layout Generator

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.board {
  display: grid;
  grid-template-columns: minmax(260px, 1fr);
  grid-template-rows: auto 1fr;
  gap: 12px;
  grid-template-areas:
    "board-head"
    "col-todo";
}

.board > .board-head { grid-area: board-head; }
.board > .col-todo { grid-area: col-todo; }
.board > .col-doing { display: none; }
.board > .col-done { display: none; }

@media (min-width: 820px) {
  .board {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 16px;
    grid-template-areas:
      "board-head board-head board-head"
      "col-todo   col-doing  col-done";
  }

    .board > .col-doing { grid-area: col-doing; }
    .board > .col-done { grid-area: col-done; }
}