Html - How can I put a vertical gap between 2 grids

samreray
May 1, 2023
184 views
0 votes
2 Answers

//grid 1 details
const JSONOfReactUrls =
  '{"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(JSONOfReactUrls);

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 JSONOfPythonUrls =
  '{"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(JSONOfPythonUrls);

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.

Answers

Use CSS flex (or grid if needed, actually a mix of the two)

Create a parent flex .row with gap
Use .col flex with gap
Don’t repeat yourself in JavaScript, create a function like createMenu() that accepts the selector target and the JSON
Don’t name something Array which is clearly not an Array. (It’s a JSON string)
Don’t name something grid which is not a grid

// DOM helper functions
const el = (sel, par) => (document || par).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Create vertical menu 
const createMenu = (targetSelector, json) => {

  const elTarget = el(targetSelector);
  const obj = JSON.parse(json);
  
  for (let key in obj) {
  
    const elem = elNew("div", {
      // id: obj[key], // No, please just don't
      innerHTML: `<a href=${key}>${obj[key]}</a>`
    });
    
    elTarget.append(elem);
    
  }
};

// Init:

const reactURLs = '{
  "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"
}';
const pythonURLs = '{
  "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"
}';

createMenu(".menu_react", reactURLs);
createMenu(".menu_python", pythonURLs);

.row {
  display: flex;
  flex-direction: row; /* Unneeded, row is by default */
  gap: 0.5rem;
}

.col {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

/* Customization: */

.my_grid {
  padding: 0.5rem;
}

.my_grid > div {
  padding: 0.5rem;
  font-size: 0.9rem;
}

.menu_react       { background-color: lightgreen; }
.menu_react > div { background-color: yellow; }
.menu_python       { background-color: orange; }
.menu_python > div { background-color: aqua; }

<div class="row">
  <div class="col my_grid menu_react"></div>
  <div class="col my_grid menu_python"></div>
</div>

Since they are floated next to each other, I’ll do it the bootstrap 3 way, i.e: adding side-padding for each column, negated with the left most and right most side margin of the row.

Just don’t forget to clear the float afterwards.
Of course, you can combine this with media query so for example on small screen, make the width of columns 100% instead of 50%.

// DOM helper functions
const el = (sel, par) => (document || par).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Create vertical menu 
const createMenu = (targetSelector, json) => {

  const elTarget = el(targetSelector);
  const obj = JSON.parse(json);

  for (let key in obj) {

    const elem = elNew("div", {
      // id: obj[key], // No, please just don't
      innerHTML: `<a href=${key}>${obj[key]}</a>`
    });

    elTarget.append(elem);

  }
};

// Init:

const reactURLs = '{
  "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"
}';
const pythonURLs = '{
  "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"
}';

createMenu(".menu_react", reactURLs);
createMenu(".menu_python", pythonURLs);

body {
  border: 1px solid black;
}

.row {
  margin-left: -5px;
  margin-right: -5px;
}

.half-col {
  float: left;
  width: 50%;
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}


/* add this for responsiveness */


/*
@media (max-width: 768px) {
  .half-col {
    width: 100%;
  }
}
*/

.col {
  display: flex;
  flex-direction: column;
  /* removed this: */
  /* width: 100%; */
  gap: 0.5rem;
}


/* Customization: */

.my_grid {
  padding: 0.5rem;
}

.my_grid>div {
  padding: 0.5rem;
  font-size: 0.9rem;
}

.menu_react {
  background-color: lightgreen;
}

.menu_react>div {
  background-color: yellow;
}

.menu_python {
  background-color: orange;
}

.menu_python>div {
  background-color: aqua;
}

<body>

  <div class="row">
    <div class="half-col">
      <div class="col my_grid menu_react">
      </div>
    </div>
    <div class="half-col">
      <div class="col my_grid menu_python"></div>
    </div>
  </div>

  <!-- clears the floats -->
  <div style="clear:both"></div>

</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How can I put a vertical gap between 2 grids

Answers