How to autoflow a Key field area and a matchlist?

Question

In the example the "keyarea" has two input controls with labels "Name Key" and "Tel Key" on top. The match list has a "Matches label" with a textarea element below.

I wanted to see if I could autoflow all fields and used 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>

The first five items are placed correctly, but the last item '6 matchlist' appears to the right of the '5 Matches' label. I wanted it to go below the "Matches" label and thought column grid-auto-flow would ensure that.

What am I doing wrong? And/or any other way to achieve this with grid auto flow?

I think I have found a way to 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>

using column grid-auto-flow. It uses two divs, one for the Keys and the other for the Matches.

Before this I tried using only one div parent and stopping the autoflow for the Keys and forcing the 'Matches' fields to start on grid row 3 continuing the column grid-autoflow. That did not work. Forcing the flow by explicit positioning disturbed the autoflow.

Answer 1

You can add this to .tawdht element:

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

I guess you can change grid-template-columns: repeat(8, 200px) to grid-template-columns: 200px 200px too as you have only two columns here.

Note that there are only two rows specified by grid-template-rows - so auto flow will affect the first two rows - see demo below:

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

This uses column grid-auto-flow only with two divs, one for the Keys and the other for the Matches.

I also tried using only one div parent and breaking out of the autoflow after the Keys and then forcing the 'Matches' fields to resume the flow at row 3 column 1. That did not work. Forcing the flow by explicit positioning disturbed the autoflow.

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>