CSS 网格 - 分组标签并在 HTML 中单独输入

Question

由于需要创建 350 多对 label/input，我想在 HTML 中将标签和输入分开分组。当标签和输入成对出现时，我使用 CSS 网格“container-1”的解决方案工作正常。

更新：我想单独保留 label/input 的第二个原因是我稍后将使用 for 循环并从导入的数组中注入数据。

问题：如何使“container-2”的结果与“container-1”的输出相同，而 HTML 没有变化，CSS 的调整很小？我想坚持 CSS 网格。

.container_1 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.container_2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

<h2>container-1</h2>

  <div class='container_1'>

    <label for="dummy1">title for dummy1:</label>
    <input id="dummy1" name="dummy1" value="dummy1">
    <label for="dummy2">longer title for dummy2:</label>
    <input id="dummy2" name="dummy2" value="dummy2">
    <label for="dummy3">even longer title for dummy3:</label>
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

<br><br>

<h2>container-2</h2>

  <div class='container_2'>

    <label for="dummy1">title for dummy1:</label>
    <label for="dummy2">longer title for dummy2:</label>
    <label for="dummy3">even longer title for dummy3:</label>

    <input id="dummy1" name="dummy1" value="dummy1">
    <input id="dummy2" name="dummy2" value="dummy2">
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

</body>
</html>

Answer 1

.container_1 {/* Your HTML for bottom and top just needs to be the same*/
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.container_2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

<h2>container-1</h2>

  <div class='container_1'>

    <label for="dummy1">title for dummy1:</label>
    <input id="dummy1" name="dummy1" value="dummy1">
    <label for="dummy2">longer title for dummy2:</label>
    <input id="dummy2" name="dummy2" value="dummy2">
    <label for="dummy3">even longer title for dummy3:</label>
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

<br><br>

<h2>container-2</h2>

  <div class='container_2'>
      <label for="dummy1">title for dummy1:</label>
      <input id="dummy1" name="dummy1" value="dummy1">
      <label for="dummy2">longer title for dummy2:</label>
      <input id="dummy2" name="dummy2" value="dummy2">
      <label for="dummy3">even longer title for dummy3:</label>
      <input id="dummy3" name="dummy3" value="dummy3">
  </div>

</body>
</html>

Answer 2

给你。更改了第二个容器的 grid-auto-flow 以更改方向。 HTML没有变化。

虽然这里您必须确定 label 和 input 的 grid-column。

.container_1 {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.container_2 {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows: auto;
  grid-auto-flow: column;
}

.container_2 label {
  grid-column: 1;
}

.container_2 input {
  grid-column: 2;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Document</title>
</head>
<body>

<h2>container-1</h2>

  <div class='container_1'>

    <label for="dummy1">title for dummy1:</label>
    <input id="dummy1" name="dummy1" value="dummy1">
    <label for="dummy2">longer title for dummy2:</label>
    <input id="dummy2" name="dummy2" value="dummy2">
    <label for="dummy3">even longer title for dummy3:</label>
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

<br><br>

<h2>container-2</h2>

  <div class='container_2'>

    <label for="dummy1">title for dummy1:</label>
    <label for="dummy2">longer title for dummy2:</label>
    <label for="dummy3">even longer title for dummy3:</label>

    <input id="dummy1" name="dummy1" value="dummy1">
    <input id="dummy2" name="dummy2" value="dummy2">
    <input id="dummy3" name="dummy3" value="dummy3">
  </div>

</body>
</html>

CSS 网格 - 分组标签并在 HTML 中单独输入

CSS grid - Group labels and input separately in HTML

html

css

css-tables

css-grid