How can I put a vertical gap between 2 grids

May 1, 2023

//grid 1 details
const arrayOfReactUrls =
  '{"https://create-react-app.dev/docs/getting-started":"React Start",\
    "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
    "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
    "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes"\
    }';

let obj = JSON.parse(arrayOfReactUrls);

for (let key in obj) {
  elem = document.createElement('div');
  elem.setAttribute('id', obj[key]);
  elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
  document.querySelector('.my_grid_react').append(elem);
}

//grid 2 details
const arrayOfPythonUrls =
  '{"https://docs.python.org/3/library/stdtypes.html#dict":"Python dictionary",\
"https://docs.python.org/3/library/stdtypes.html#typesseq-common":"Python Sequence",\
"https://docs.python.org/3/reference/expressions.html#comparisons":"Python expressions",\
"https://pythontutor.com/visualize.html#mode=edit":"Python visualiser",\
"https://towardsdatascience.com/unpacking-operators-in-python-306ae44cd480":"Unpacking operator"\
    }';

obj = JSON.parse(arrayOfPythonUrls);

for (let key in obj) {
  elem = document.createElement('div');
  elem.setAttribute('id', obj[key]);
  elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
  document.querySelector('.my_grid_python').append(elem);
}

.my_grid_react {
  display: grid;
  float: left;
  grid-template-columns: repeat(1, auto);
  background-color: lightgreen;
  width: 50%;
}

.my_grid_react div {
  background-color: yellow;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

.my_grid_python {
  display: grid;
  grid-template-columns: repeat(1, auto);
  background-color: orange;
  width: 50%;
}

.my_grid_python div {
  background-color: aqua;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

<div class="my_grid_react"></div>
<div class="my_grid_python"></div>

I created 2 grids and used float to position the 2 grids adjacent to each other;Now I wish to have a small vertical whitish gap of say 5px between the grid (whose background color is lightgreen) and the grid (whose background color is orange), please suggest how I can place a vertical gap between the adjacent grids.

>Solution :

You can reduce the width of the grids and add some margin between them.

<!DOCTYPE html>
<html>

<head>
    <style>
        .my_grid_react {
        /* make it inline-block */  
            display: inline-block;
            vertical-align: top;
            background-color: lightgreen;
            width: 48%;
             /* reduced width */
            margin-right: 1%;
        }

        .my_grid_python {
       /* make it inline-block */  
            display: inline-block;
            vertical-align: top;
            background-color: orange;
            width: 48%;
          /* reduced width */
        }

        .my_grid_react div {
            background-color: yellow;
            margin: 8px;
            padding: 6px;
            font-size: 14px;
        }

        .my_grid_python div {
            background-color: aqua;
            margin: 8px;
            padding: 6px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="my_grid_react"></div>
    <div class="my_grid_python"></div>
    <script>
        //grid 1 details
        const arrayOfReactUrls = '{"https://create-react-app.dev/docs/getting-started":"React Start",\
    "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
    "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
    "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes"\
    }';
        let obj = JSON.parse(arrayOfReactUrls);

        for (let key in obj) {
            elem = document.createElement('div');
            elem.setAttribute('id', obj[key]);
            elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
            document.querySelector('.my_grid_react').append(elem);
        }

        //grid 2 details
        const arrayOfPythonUrls =
            '{"https://docs.python.org/3/library/stdtypes.html#dict":"Python dictionary",\
    "https://docs.python.org/3/library/stdtypes.html#typesseq-common":"Python Sequence",\
    "https://docs.python.org/3/reference/expressions.html#comparisons":"Python expressions",\
    "https://pythontutor.com/visualize.html#mode=edit":"Python visualiser",\
    "https://towardsdatascience.com/unpacking-operators-in-python-306ae44cd480":"Unpacking operator"\
}';

        obj = JSON.parse(arrayOfPythonUrls);

        for (let key in obj) {
            elem = document.createElement('div');
            elem.setAttribute('id', obj[key]);
            elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
            document.querySelector('.my_grid_python').append(elem);
        }
    </script>
</body>

</html>