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

Question

在示例中，“keyarea”有两个 input 控件，顶部带有标签“Name Key”和“Tel Key”。匹配列表有一个“匹配标签”，下面有一个 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”标签的右侧。我希望它低于“匹配”标签，并认为 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;
}

.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，一个用于 Keys，另一个用于 Matches。

在此之前，我尝试仅使用一个 div 父级并停止键的自动流，并强制“匹配”字段从网格第 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 的列 grid-auto-flow，一个用于键，另一个用于匹配。

我还尝试只使用一个 div 父级并在 Keys 之后打破自动流，然后强制“匹配”字段在第 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>