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

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>

CodePudding user response：

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 */
}

CodePudding user response：

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>