css - 如果兄弟列不存在，则使列跨度为全宽

Question

我试图在 CSS 网格中有一些动态行为，同时让底层网格规则是静态的。

我创建了一个 sandbox更好地说明我想要发生的事情。当 GREEN 框从 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)) 创建一个环绕网格 - 注意最小宽度 这里是视口(viewport)单位。
• 现在为绿色部分设置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 方法 - 使用包装 flexbox 并设置:- flex: 1 到 green div，- flex-basis: 100% 到黄色部分，以及- flex: 2 red 部分。

请看下面的演示:

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>