Make any image a pixelated version of itself

PixelGrid.vue

<template>
  <div class="Home">

    <div class="Grid">
      <div
        v-for="i in (tiles*tiles)"
        v-bind:key="i">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Pixel Grid',
  data: () => ({
    tiles: 10,
  }),
  props: {
    msg: String,
  },
};
</script>

<style lang="scss">
.Home {
  display: flex;

  justify-content: center;
  align-items: center;

  height: 100vh;

  background: linear-gradient(
    135deg,
    darken(#29323c, 10%),
    darken(#2b5876, 10%),
    darken(#4e4376, 10%));
}

$grid-columns: 10;
$grid-size: 16px;
$grid-bg-size: 100 / $grid-columns;

.Grid {
  display: grid;

  max-width: $grid-size * $grid-columns + $grid-size;
  margin: 0 auto;
  grid-gap: 1px;
  grid-template-columns: repeat($grid-columns, 1fr);
}

.Grid div {
  width: $grid-size;
  height: $grid-size;
}

.Grid div {
  background-image: url('/img/beer.jpg');
  background-size: $grid-size * $grid-columns;

  @for $j from 0 through $grid-columns - 1 {
    @for $i from 0 through $grid-columns - 1 {

      $left: $i * $grid-bg-size;
      $top: $j * $grid-bg-size;

      &:nth-of-type(#{$i + 1 + ($j * $grid-columns)}) {
        background-position: $left*1% $top*1%;
      }
    }
  }
}
</style>