css 我怎样才能把一个垂直的差距2网格

dzhpxtsq 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(105)

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

我创建了2个grids，并使用float将2个网格相邻放置;现在我希望在网格（其背景颜色为lightgreen）和网格（其背景颜色为orange）之间有一个小的垂直白色间隙，比如5 px，请建议如何在相邻网格之间放置垂直间隙。

css

来源：https://stackoverflow.com/questions/76149666/how-can-i-put-a-vertical-gap-between-2-grids

1条答案

按热度按时间

oxcyiej71#

使用CSS flex（如果需要，也可以使用grid，actually a mix of the two）

使用gap创建父Flex .row
将.col flex与gap配合使用
不要在JavaScript中重复，创建一个类似createMenu()的函数，它接受选择器目标和JSON
不要命名Array，这显然不是数组。（这是一个JSON字符串）
不要命名不是网格的东西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>

赞(0）回复(0）举报 2023-05-02

我来回答

css 我怎样才能把一个垂直的差距2网格

1条答案

相关问题

热门标签

最新问答