Responsive tables with grid (sass)

README.md

Desktop:

Name	Age	Sex	Comment

Mobile:

Name	Age	Sex
Comment

example.pug

ul
  li.table-row
    .c-4.mc-6 Name
    .c-2.mc-3 Age
    .c-2.mc-3 Sex
    .c-4.mc-12 Comment

table.sass

.table-row
  display: grid
  grid-column-gap: 16px
  grid-template-columns: repeat(12, 1fr)

@for $i from 1 through 12
  .c-#{$i}
    grid-column: span #{$i}

@media (max-width: 768px)
  @for $i from 1 through 12
    .mc-#{$i}
      grid-column: span #{$i}