Question

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

我想查看是否可以自动流程所有字段并使用列 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匹配列表”显示在“5匹配”标签的右侧。我希望它低于“匹配”标签，并认为列 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>

使用列grid-auto-flow。它使用两个div，一个用于Keys，另一个用于Matches。

在此之前，我尝试仅使用一个div父级并停止Keys的自动流程并强制“匹配”字段在网格行3上开始，继续列grid-autoflow。那没用。通过显式定位强制流动扰乱了自动流程。

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只指定两个行 - 因此自动流程会影响前两行 - 请参阅下面的演示：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这只使用列网格自动流程，只有两个div，一个用于Keys，另一个用于匹配。

我还尝试过只使用一个div父级，并在Keys之后突破自动流程，然后强制执行“匹配”。字段在第3行第1列恢复流程。这不起作用。通过显式定位强制流动扰乱了自动流程。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: