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

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

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

Method 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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0