Triangle Grid

by marakoss

HAML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>...

CSS

:root {
  --grid-size: calc(4.5rem + 2vw);
  --grid-size-y: calc(var(--grid-size) * 0.8660254);
  --grid-column-gap-mult: 0.023;
  --num-cols: 3;
}

body {
  min-height: 100vh;
  width: calc(100% - var(--grid-size) * 2);
  margin: calc(var(--grid-size) * 0.46) auto;
  display: grid;
  grid-auto-rows: var(--grid-size-y);
  grid-template-columns: repeat(var(--num-cols), var(--grid-size));
  grid-row-gap: var(--grid-size-y);
  grid-column-gap: calc(var(--grid-size) * var(--grid-column-gap-mult));
  background: #0e1020;
}

div {
  display: block;
  position: relative;
  background-color: #ddd;
  background-size: 100% 100%;
  transform: scale(1.93);
  border-left: 1px solid red;;
  &:nth-child(odd) {
    clip-path: polygon(0 0, 100% 0, 50% 98%, 0 0);
  }
  &:nth-child(even) {
    clip-path: polygon(50% 2%, 100% 100%, 0 100%, 50% 2%);
  }

}

@media (min-width: 570px) {
  :root {
    --num-cols: 5;
  }
}

@media (min-width: 810px) {
  :root {
    --num-cols: 7;
  }
}

@media (min-width: 1120px) {
  :root {
    --num-cols: 9;
  }
}

@media (min-width: 1340px) {
  :root {
    --num-cols: 11;
  }
}

@media (min-width: 1600px) {
  :root {
    --num-cols: 13;
  }
}