1
在這個例子中，「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 matchlist」出現在「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>。它使用兩個div，一個用於Keys，另一個用於Matches。
在此之前，我嘗試只使用一個div父，並停止自動流的鍵和強制'匹配'字段開始網格行3繼續列grid-autoflow。這沒有用。通過顯式定位強制流動會干擾自動流動。
我不清楚。你想在哪裏出現textarea？你能發佈你想要的佈局的圖像嗎？以下是我現在看到的：https：//jsfiddle.net/7vwxu4y1/ –
這就是我使用Firefox和Chrome的情況。我希望textarea元素放置在'5匹配'標籤下面。 – resander
這個？ https://jsfiddle.net/7vwxu4y1/1/ –