如何自动排列关键字段区域和匹配列表？

Question

在示例中，"keyarea" 有两个 input 控件，顶部带有标签 "Name Key" 和 "Tel Key"。匹配列表有一个 "Matches label"，下面有一个 textarea 元素。

我想看看我是否可以 autoflow 所有字段并使用 column grid-auto-flow。

body {
  margin: 40px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even){
  background-color: #ccc;
  color: #000;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(8, 200px);
  grid-template-rows: 100px 100px;
  grid-auto-flow: column;
  }

.crlf { // like Carriage return Line feed
  grid-row-start: 3;
  grid-column-start: 1;
}

.tawdht { 
  width:  12em;
  height: 8em;
}

<div class="wrapper">
  <label class="box">1 Name Key</label>
  <input class="box" value="2 namekeyval"/>
  <label class="box">3 Tel Key</label>
  <input class="box" value="4 telkeyval"/>
  <label class="box crlf">5 Matches</label>
  <textarea class="box tawdht">6 matchlist</textarea>

前五个项目放置正确，但最后一个项目“6 matchlist”出现在“5 Matches”标签的右侧。我希望它位于 "Matches" 标签下方，并认为 column grid-auto-flow 会确保这一点。

我做错了什么？ And/or还有其他方法可以通过网格自动流实现吗？

我想我找到了一种自动流动的方法

body {
   margin: 40px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even){
  background-color: #ccc;
  color: #000;
}

.parent,
.parent2 {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 100px 100px; 
  grid-template-columns: 200px 200px 200px;
  grid-auto-flow: column;
  background-color: yellow;
}

.parent2 {
  grid-template-columns: 200px;
  background-color: cyan;
}


.tawdht { 
  width:  40em;
  height: 8em;
}

.btn {
  background-color: firebrick;
  color: white;
  width:  150px;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  grid-area: 2/4  /3/5;
}

<div class="parent">
  <label class="box">1 Name key</label>
  <input class="box" value="2 namekeyval"/>
  <label class="box">3 Address</label>
  <input class="box" value="4 addresskeyval"/>
  <label class="box">5 Tel key</label>
  <input class="box" value="6 telkeyval"/>
  <button class="btn">Search</button> 
</div>

<div class="parent2">
  <label class="box">7 Matches</label>
  <textarea class="box tawdht">8 matchlist</textarea>
</div>

使用列网格自动流。它使用两个 div，一个用于键，另一个用于匹配。

在此之前，我尝试仅使用一个 div 父级并停止键的自动流并强制 'Matches' 字段从网格第 3 行开始继续列网格自动流。那没有用。通过显式定位强制流动扰乱了自动流动。

Answer 1

您可以将此添加到 .tawdht 元素：

grid-row-start: 4;
grid-column-start: 1;

我想你也可以将 grid-template-columns: repeat(8, 200px) 更改为 grid-template-columns: 200px 200px，因为你这里只有两个列。

请注意，grid-template-rows 只指定了两行 - 所以 自动流 将影响前两行 -请参阅下面的演示：

body {
  margin: 40px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
  grid-auto-flow: column;
}

.crlf {
  grid-row-start: 3;
  grid-column-start: 1;
}

.tawdht {
  width: 12em;
  height: 8em;
  grid-row-start: 4;
  grid-column-start: 1;
}

<div class="wrapper">
  <label class="box">1 Name Key</label>
  <input class="box" value="2 namekeyval" />
  <label class="box">3 Tel Key</label>
  <input class="box" value="4 telkeyval" />
  <label class="box crlf">5 Matches</label>
  <textarea class="box tawdht">6 matchlist</textarea>
</div>

Answer 2

这仅使用两个 div 的列网格自动流，一个用于键，另一个用于匹配。

我也试过只使用一个 div 父级并在 Keys 之后中断自动流，然后强制 'Matches' 字段恢复第 3 行第 1 列的流。那没有用.通过显式定位强制流动扰乱了自动流动。

body {
   margin: 40px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even){
  background-color: #ccc;
  color: #000;
}

.parent,
.parent2 {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 100px 100px; 
  grid-template-columns: 200px 200px 200px;
  grid-auto-flow: column;
  background-color: yellow;
}

.parent2 {
  grid-template-columns: 200px;
  background-color: cyan;
}


.tawdht { 
  width:  40em;
  height: 8em;
}

.btn {
  background-color: firebrick;
  color: white;
  width:  150px;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  grid-area: 2/4  /3/5;
}

<div class="parent">
  <label class="box">1 Name key</label>
  <input class="box" value="2 namekeyval"/>
  <label class="box">3 Address</label>
  <input class="box" value="4 addresskeyval"/>
  <label class="box">5 Tel key</label>
  <input class="box" value="6 telkeyval"/>
  <button class="btn">Search</button> 
</div>

<div class="parent2">
  <label class="box">7 Matches</label>
  <textarea class="box tawdht">8 matchlist</textarea>
</div>

如何自动排列关键字段区域和匹配列表？

How to autoflow a Key field area and a matchlist?

html

css

css-grid