How to add small square shaped grid to DIV element using the HTML/CSS

Question

I have a div element within my application. I want to add background to it. The background should consist of small squares. As I would like to draw some shapes on top of it. I am unable to follow what exactly needs to be done in order to get these grids in the background. Can someone please help?

I want the whole div portion within the HTML page to look something like this:

It should Something like this:

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <v-stage ref="stage" class="stage">
          <v-layer ref="layer"> </v-layer>
        </v-stage>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

<style scoped>
  .stage {
    background-color: red;
  }
</style>

Answer 1

A background can do it:

 html { min-height: 100%; background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),#366 270deg, #0000 0), conic-gradient(at calc(100% - 1px) calc(100% - 1px),#a9a9a9 270deg, #0000 0); background-size: 100px 100px, 20px 20px; /* adjust the size like you want */ }

Answer 2

I was implementing this to my KonvaJS Stage and the following is the complete code sample in incase it it's required for someone in the future:

 <style scoped> .root { --bg-color: #fff; --line-color-1: #D5D8DC; --line-color-2: #a9a9a9; } .body { height: 100vh; margin: 0; } .stage { height: 100%; background-color: var(--bg-color); background-image: conic-gradient(at calc(100% - 2px) calc(100% - 2px),var(--line-color-1) 270deg, #0000 0), conic-gradient(at calc(100% - 1px) calc(100% - 1px),var(--line-color-2) 270deg, #0000 0); background-size: 100px 100px, 20px 20px; } </style>

 <div class="root" style="width:100%; height:100%"> <div class="body"> <div class="stage"></div> </div> </div>