キーフィールド領域とマッチリストをオートフロイドする方法は？

Question

この例では、 "keyarea"には、 "Name Key"と "Tel Key"というラベルのついた2つのinputコントロールがあります。一致リストには、以下のtextarea要素の「一致ラベル」があります。

私はできれば自動流し込みすべてのフィールドを見てみたかったと列grid-auto-flowを使用。

最初の5つの項目

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つのマッチ」ラベルの右側に表示されます。私はそれが "Matches"ラベルの下に行きたいと思って、 コラム 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>

への道を発見したと思います。 2つのdivを使用します.1つはキー用で、もう1つはMatches用です。

これまでは、divの親を1つだけ使用し、キーのオートフローを停止し、グリッド行3で「一致」フィールドを開始してグリッドオートフローを続行しようとしました。それはうまくいかなかった。明示的な配置による流れを強制することは、オートフローを妨害した。

Answer 1

あなたは.tawdht要素にこれを追加することができます。私はここだけの列を持っているとして、あなたはあまりにもgrid-template-columns: 200px 200pxにgrid-template-columns: repeat(8, 200px)を変更することができますね

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

。 grid-template-rowsで指定された唯一の2つの行があることを

注 - そう自動流れは、最初の2行に影響します - デモ下記参照：

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

をこれは、列のグリッドを使用しています2つのdiv、すなわちキーとマッチの2つのdivでのみ、自動フローが実行されます。

また、divの親を1つだけ使用して、キーの後に自動フローを抜けて、「一致」フィールドに行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>