Grid CSS - Space Invader

Pure CSS Space Invader

by Pascal Antoinet

HTML

<body>
  <div class="globalWrapper">
    <div class="spaceInvader">
      <div class="square sq01"></div>
      <div class="square sq02"></div>
      <div class="square sq03"></div>
      <div class="square sq04"></div>
      <div class="square sq05"></div>
      <div class="square sq06"></div>
      <div class="square sq07"></div>
      <div class="square sq08"></div>
      <div class="square sq09"></div>
      <div class="square sq10"></div>
      <div class="square sq11"></div>
      <div class="square sq12"></div>
      <div class="square sq13"></div>
      <div class="square sq14"></div>
      <div class="square sq15"></div>
      <div class="square sq16"></div>
    </div>
  </div>
</body>

CSS

body {
  overflow: hidden;
}

.globalWrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  background: black;
}

.spaceInvader {
  width: 50vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.square {
  background: black;
  color: white;
}

.sq01 {
  grid-column: 3 / 3;
  grid-row: 1 / 1;
  animation: sqAnimate 0.3s 0.3s forwards;
}

.sq02 {
  grid-column: 9 / 9;
  grid-row: 1 / 1;
  animation: sqAnimate 0.3s 0.2s forwards;
}

.sq03 {
  grid-column: 4 / 4;
  grid-row: 2 / 2;
  animation: sqAnimate 0.3s 0.4s forwards;
}

.sq04 {
  grid-column: 8 / 8;
  grid-row: 2 / 2;
  animation: sqAnimate 0.3s 0.5s forwards;
}

.sq05 {
  grid-column: 3 / 10;
  grid-row: 3 / 3;
  animation: sqAnimate 0.3s 0.6s forwards;
}

.sq06 {
  grid-column: 2 / 4;
  grid-row: 4 / 4;
  animation: sqAnimate 0.3s 0.7s forwards;
}

.sq07 {
  grid-column: 5 / 8;
  grid-row: 4 / 4;
  animation: sqAnimate 0.3s 0.8s forwards;
}

.sq08 {
  grid-column: 9 / 11;
  grid-row: 4 / 4;
  animation: sqAnimate 0.3s 0.9s forwards;
}

.sq09 {
  grid-column: 2 / 11;
  grid-row: 5 / 5;
  animation: sqAnimate 0.3s 1s forwards;
}

.sq10 {
  grid-column: 1 / 1;
  grid-row: 5 / 8;
  animation: sqAnimate 0.3s 1.1s forwards;
}

.sq11 {
  grid-column: 11 / 11;
  grid-row: 5 / 8;
  animation: sqAnimate 0.3s 0.8s forwards;
}

.sq12 {
  grid-column: 3 / 10;
  grid-row: 6 / 6;
  animation: sqAnimate 0.3s 0.5s forwards;
}

.sq13 {
  grid-column: 3 / 3;
  grid-row: 7 / 7;
  animation: sqAnimate 0.3s 0.6s forwards;
}

.sq14 {
  grid-column: 9 / 9;
  grid-row: 7 / 7;
  animation: sqAnimate 0.3s 0.7s forwards;
}

.sq15 {
  grid-column: 4 / 6;
  grid-row: 8 / 8;
  animation: sqAnimate 0.3s 0.2s forwards;
}

.sq16 {
  grid-column: 7 / 9;
  grid-row: 8 / 8;
  animation: sqAnimate 0.3s 0.5s forwards;
}

/* ANIMATION */

@keyframes sqAnimate {
    0% {background: black;}
    100%...

JavaScript

$spaceInvaderWidth = $(".spaceInvader").width();
$(".spaceInvader").height($spaceInvaderWidth * 8 / 11);