CodePen Embed - Triangle Grid Images

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

@import url("https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap");
div:nth-child(24n - 1) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x191");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 2) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x192");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 3) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x193");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 4) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x194");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 5) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x195");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 6) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x196");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 7) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x197");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 8) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x198");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 9) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x199");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 10) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x200");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 11) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x201");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 12) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x202");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 13) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x203");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 14) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x204");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 15) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x205");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 16) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x206");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 17) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x207");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 18) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x208");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 19) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x209");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 20) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x210");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 21) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x211");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 22) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x212");
  background-size: 100% 100%;
  background-position: center;
}

div:nth-child(24n - 23) {
  background-image: url("https://source.unsplash.com/user/the_modern_life_mrs/200x213");
  background-size: 100% 100%;
  background-position: center;
}

: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));
  -webkit-box-pack: center;
          justify-content: center;
  font-size: calc(var(--grid-size) * 0.15);
  background: #0e1020;
}

div {
  position: relative;
  background-color: #ddd;
  -webkit-transform: scale(1.93);
          transform: scale(1.93);
}
div:nth-child(odd) {
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 98%, 0 0);
          clip-path: polygon(0 0, 100% 0, 50% 98%, 0 0);
}
div:nth-child(even) {
  -webkit-clip-path: polygon(50% 2%, 100% 100%, 0 100%, 50% 2%);
          clip-path: polygon(50% 2%, 100% 100%, 0 100%, 50% 2%);
}
div:nth-child(6n) {
  background-image: none;
}
div:nth-child(6n):before {
  position: absolute;
  top: calc(50% + 1em);
  left: 50%;
  -webkit-transform: translate(-50%, -50%) translate(0, -0.3em);
          transform: translate(-50%, -50%) translate(0, -0.3em);
  content: "awesome";
  font-family: "Kaushan Script", cursive;
  color: #e26;
}
div:nth-child(18n):before {
  -webkit-transform: translate(-50%, -50%) rotate(-60deg) translate(0, -0.3em);
          transform: translate(-50%, -50%) rotate(-60deg) translate(0, -0.3em);
  content: "radical";
}
div:nth-child(18n + 6):before {
  -webkit-transform: translate(-50%, -50%) rotate(60deg) translate(0, -0.3em);
          transform: translate(-50%, -50%) rotate(60deg) translate(0, -0.3em);
  content: "tubular";
}
div:nth-child(24n):before {
  color: #4cd;
}
div:nth-child(15n-3) {
  background-image: none;
  background-color: #e26;
}
div:nth-child(5n-3):before {
  color: white;
}

@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;
  }
}

This Pen is owned by Jaymar G. Aranas on CodePen.

See more by @jaymar-g-aranas on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.