Как я могу поставить вертикальный зазор между двумя сетками CSS

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

Я создал 2 grids и использовал float, чтобы расположить 2 сетки рядом друг с другом; теперь я хочу иметь небольшой вертикальный беловатый зазор, скажем, 5 пикселей между сеткой (чей цвет фона lightgreen) и сеткой (чей цвет фона orange) , пожалуйста, предложите, как я могу разместить вертикальный зазор между соседними сетками.

(оффтоп) Не повторяйтесь. Нет смысла повторять кусок кода, который делает почти то же самое, кроме селектора целевого элемента. Вместо этого создайте функцию, передайте селектор в качестве аргумента функции. И JSON тоже.

— 01.05.2023 21:35

Обычно используется margin для создания пространства между элементами в CSS. Вы пробовали это?

— 01.05.2023 21:39

@HereticMonkey между двумя разными соседними сетками, я не знаю, как поставить отступ

— 01.05.2023 21:42

Я бы начал с документации для маржи.

— 01.05.2023 21:43

Я поставил margin:10px; после float:left;, но позиции сетки больше не соседствуют друг с другом

— 01.05.2023 21:49

Возможно, вам придется уменьшить их ширину, чтобы все поместилось.

— 01.05.2023 21:54

Просто используйте display: flex (или, в конечном итоге, grid) и свойство gap

— 01.05.2023 22:08

javascript html css

01.05.2023 21:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

108

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте CSS flex (или сетку, если нужно, на самом деле смесь двух)

Создайте родительский флекс .row с помощью gap
Используйте .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>

понял, но почему мы не можем использовать подход сетки вместо гибкого подхода?

— 01.05.2023 22:07

@samreray вы можете в конечном итоге использовать CSS grid, но опять же, с родительским элементом. Я могу показать вам, как через минуту

— 01.05.2023 22:27

@samreray видишь? jsfiddle.net/RokoCB/z1e3tsLk попробуйте использовать display: grid вместо display: flex для .col и посмотрите, что получится. Так что да, вы можете использовать сетку CSS, где это необходимо, но также flex вы можете смешивать их, делать все, что хотите. Все зависит от конечного результата. В любом случае, gap полезен в обоих случаях.

— 01.05.2023 22:32

@roko-c-buljan хорошо, как вы предположили, он тоже работает с display:grid и некоторыми незначительными изменениями CSS, jsfiddle.net/samreray/Lqc7304n/17. Также вы предложили не использовать ` id: obj [key] ` по какой-либо конкретной причине или просто чтобы избежать дублирования идентификаторов div?

— 02.05.2023 22:02

@samreray не только из-за возможного дублирования идентификатора. obj[key] содержит строковое значение, например "React Start" — это ни в коем случае не действительный идентификатор. И вообще не нужно удостоверение личности.

— 02.05.2023 23:35

01.05.2023 22:04

Поскольку они плавают рядом друг с другом, я сделаю это бутстрапом 3, то есть: добавлю боковое дополнение для каждого столбца, сбрасывая самое левое и самое правое боковое поле строки.

Только не забудьте после этого clear поплавок.
Конечно, вы можете комбинировать это с медиа-запросом, например, на маленьком экране сделайте ширину столбцов 100% вместо 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>

Можете ли вы изменить ответ, используя только сетку CSS .. ( display:grid)

— 02.05.2023 21:08

02.05.2023 16:46