将 CSS 网格布局与动态创建的行一起使用答案

【问题标题】：Using the CSS grid layout with dynamically created rows将 CSS 网格布局与动态创建的行一起使用
【发布时间】：2019-02-25 00:16:40
【问题描述】：

我正在尝试使用 CSS 网格布局来设置具有动态创建行的“控制器”的样式。我无法正确设置间距。

在我所拥有的情况下，滑块容器不会出现在它们自己的行中（尽管grid-auto-rows: auto），并且滑块容器中的内容不会出现在同一行中（尽管grid-template-columns: 1fr 2fr 1fr）。在第 2 列和第 3 列之间还会出现一些奇怪的意外间距（无论如何都不应该存在）。

最终我想要的是每行包含 1 个标签、1 个滑块和 1 个值（都相互关联），并且每列中的元素具有相同的宽度，最好是最小宽度将最大长度的内容保存在相应列中。

我很好奇的事情是

此控制器是否应具有绝对定位/绝对宽度（我将如何使其宽度适合内容？）
如何编写 CSS，使其在用户调整屏幕大小时能够很好地调整大小
如果标签列宽是所有标签内容的最大值中的最小值，而值列宽是所有值内容中最大值的最小值，如果我为滑块设置了最小宽度，那应该给我最小值容器的宽度，对吧？
如果行是动态创建的，如何通过grid-row 属性引用它们？

感谢您的帮助。

var slidersContainer = document.createElement("div");
slidersContainer.id = "sliders-container";

var body = document.getElementsByTagName("body")[0];
body.appendChild(slidersContainer);

for (i = 0; i < 10; i++) {
  var sliderContainer = document.createElement("div");
  sliderContainer.className = "slider-container";
  slidersContainer.appendChild(sliderContainer);

  var label = document.createElement("div");
  label.className = "slider-label"
  label.innerHTML = "some-label-" + i;
  sliderContainer.appendChild(label);

  var input = document.createElement("input");
  input.className = "slider";
  input.min = 0;
  input.max = 100;
  input.type = "range";
  sliderContainer.appendChild(input);

  var value = document.createElement("div");
  value.className = "slider-value";
  value.innerHTML = "0.0000001";
  sliderContainer.appendChild(value);
}

#sliders-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  padding: 5px;
  background-color: #333333;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

.slider-container {}

.slider-label {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 1;
}

.slider {
  grid-column: 2;
}

.slider-value {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 3;
}

<!DOCTYPE html>
<html>

<head></head>

<body></body>

</html>

【问题讨论】：

标签： javascript html css grid-layout

【解决方案1】：

将 CSS 网格 属性应用到 slider-container 而不是 绝对定位 容器 - 参见下面的演示：

var slidersContainer = document.createElement("div");
slidersContainer.id = "sliders-container";

var body = document.getElementsByTagName("body")[0];
body.appendChild(slidersContainer);

for (i = 0; i < 10; i++) {
  var sliderContainer = document.createElement("div");
  sliderContainer.className = "slider-container";
  slidersContainer.appendChild(sliderContainer);

  var label = document.createElement("div");
  label.className = "slider-label"
  label.innerHTML = "some-label-" + i;
  sliderContainer.appendChild(label);

  var input = document.createElement("input");
  input.className = "slider";
  input.min = 0;
  input.max = 100;
  input.type = "range";
  sliderContainer.appendChild(input);

  var value = document.createElement("div");
  value.className = "slider-value";
  value.innerHTML = "0.0000001";
  sliderContainer.appendChild(value);
}

#sliders-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px;
  padding: 5px;
  background-color: #333333;
}

.slider-container { /* CHANGED */
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

.slider-label {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 1;
}

.slider {
  grid-column: 2;
}

.slider-value {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
  color: white;
  grid-column: 3;
}

【讨论】：

@geofflittle 让我知道您对此的看法，谢谢！