Увеличьте ширину столбца, если столбец-брат не существует

Question

Я пытаюсь вести себя несколько динамично в сетке CSS, в то время как базовые правила сетки статичны.

Я создал песочницу , чтобы лучше проиллюстрировать, что я хочу, чтобы произошло. Когда ЗЕЛЕНЫЙ блок удален из DOM, я хочу, чтобы RED покрыл всю первую строку, а когда GREEN видим, я хочу, чтобы RED / GREEN выделил 2fr / 1fr в первой строке.

Я искал документы, чтобы попытаться найти способ сделать это, но единственное решение, которое я нахожу, заключается в манипулировании CSS во время выполнения. Можно ли достичь этого только с помощью CSS?

const toggleBtn = document.querySelector("button.toggle-green");
const grid = document.querySelector(".grid");
const yellow = document.querySelector(".yellow");

const getGreen = () => document.querySelector(".green");
const createGreen = () => {
  const div = document.createElement("div");
  div.className = "green";
  div.innerText = "GREEN";
  return div;
};

toggleBtn.addEventListener("click", () => {
  const green = getGreen();
  if (!green) {
    grid.insertBefore(createGreen(), yellow);
  } else {
    green.remove();
  }
});

body {
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 2px 2px;
}

.yellow {
  background: yellow;
  grid-column: span 2;
}

.red {
  background: red;
}

.green {
  background: green;
}

<div class="grid">
  <div class="red">RED</div>
  <div class="green">GREEN</div>
  <div class="yellow">YELLOW</div>
</div>
<button class="toggle-green">Toggle green</button>

Answer 1

Вы можете заставить его работать с CSS-сетками , но вам нужно тщательно установить ширину , чтобы установить:

• Создайте сетку обтекания , используя grid-template-columns: repeat(auto-fit, minmax(66.66vw, 1fr)) - обратите внимание на минимальная ширина здесь в единицах просмотра .
• Теперь установите min-width: 33.33vw для зеленой секции .

В приведенном ниже коде - обратите внимание на использование calc - это регулирует по горизонтали для grid-gap.См. Демо ниже:

const toggleBtn = document.querySelector("button.toggle-green");
const grid = document.querySelector(".grid");
const yellow = document.querySelector(".yellow");

const getGreen = () => document.querySelector(".green");
const createGreen = () => {
  const div = document.createElement("div");
  div.className = "green";
  div.innerText = "GREEN";
  return div;
};

toggleBtn.addEventListener("click", () => {
  const green = getGreen();
  if (!green) {
    grid.insertBefore(createGreen(), yellow);
  } else {
    green.remove();
  }
});

body {
  font-family: sans-serif;
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(66.66vw - 2px), 1fr));
  grid-gap: 2px 2px;
  width: 100vw;
}

.yellow {
  background: yellow;
  grid-column: span 2;
}

.red {
  background: red;
}

.green {
  background: green;
  min-width: 33.33vw;
}

<div class="grid">
  <div class="red">RED</div>
  <div class="green">GREEN</div>
  <div class="yellow">YELLOW</div>
</div>

<button class="toggle-green">Toggle green</button>

---

Решение Flexbox

Но я бы предложил подход Flexbox , с которым вы уже знакомы - используйте упаковочную флексбокс и установите: - flex: 1 в зеленый div, - flex-basis: 100% в желтый раздел и - flex: 2 красный раздел.

См. демонстрацию ниже:

const toggleBtn = document.querySelector("button.toggle-green");
const grid = document.querySelector(".grid");
const yellow = document.querySelector(".yellow");

const getGreen = () => document.querySelector(".green");
const createGreen = () => {
  const div = document.createElement("div");
  div.className = "green";
  div.innerText = "GREEN";
  return div;
};

toggleBtn.addEventListener("click", () => {
  const green = getGreen();
  if (!green) {
    grid.insertBefore(createGreen(), yellow);
  } else {
    green.remove();
  }
});

body {
  font-family: sans-serif;
  margin: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
}

.yellow {
  background: yellow;
  flex-basis: 100%;
}

.red {
  background: red;
  flex: 2;
}

.green {
  background: green;
  flex: 1;
}

<div class="grid">
  <div class="red">RED</div>
  <div class="green">GREEN</div>
  <div class="yellow">YELLOW</div>
</div>

<button class="toggle-green">Toggle green</button>