How to style form with line numbers using CSS Grid Layout? - html

Question

I would like to create a form, which has a line number on each line and several form fields on each line. If the fields don't fit into one line, they should wrap into a new line while the line number stays at the top of the line. Here's an illustration of this form:
(The dark blue lines describe the explicit grid areas, the light blue line implicit grid areas for the different form fields.)
I know CSS Grid Layout is meant to solve use cases like this, though it is not clear to me, how to generate the form mentioned above with it.
What I've tried so far is:
HTML:
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<label for="field1">Field 1 <input id="field1"/></label>
<label for="field2">Field 2 <input id="field2"/></label>
<label for="field3">Field 3 <input id="field3"/></label>
</div>
<div class="row">
<div class="lineNumber">2</div>
<label for="field1">Field 4 <input id="field1"/></label>
</div>
</div>
CSS:
.row {
display: grid;
grid-template-columns: 50px 1fr 1fr;
grid-auto-rows: 30px;
}
.row > * {
padding: 4px;
}
.lineNumber {
grid-row-end: line-number span;
}
What I don't get yet, how can I achieve to let the row number column span over the whole height of the row while the other columns wrap between lines. I assume it must be possible defining the line-number named area using grid-template-rows. Though how?
EDIT:
I'm aware that it may be possible by using display: table-row; / display: table-cell;, though my main point is to achieve this using CSS Grid Layout.
2ND EDIT:
Note that some months after I asked this question here and Grid Layout implementations stabilized showing this feature is not available yet, I requested it at the CSS Working Group. Since then a similar request for spanning explicit and implicit tracks was made.

Answer 1

In my opinion, css counters should meet your question
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
form {
counter-reset: form;
border: 2px solid cyan;
}
fieldset {
position: relative;
display: block;
padding: 1em 1em 1em 3em !important;
border-bottom: 2px solid cyan;
}
fieldset::before {
counter-increment: form;
content: counter(form);
position: absolute;
left: 5px;
top: 5px;
font-weight: bolder;
}
.sp-b { margin-bottom: 1em }
<form>
<fieldset>
<div class="row">
<div class="col-xs-6 sp-b"><input type="text" class="form-control"></div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
</div>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="col-xs-12"><input type="text" class="form-control"></div>
</div>
</fieldset>
</form>

Answer 2

You can use display:table/table-cell to achieve what you want
Snippet
*,
*:before,
*:after {
box-sizing: border-box;
}
.form {
display: table;
table-layout: fixed;
width: 100%;
border: 1px solid #000;
}
.row {
display: table-row
}
.lineNumber,
.fields {
display: table-cell;
vertical-align: top;
padding: 10px 0;
}
.lineNumber {
border: 1px solid #000;
border-width: 0 1px 1px 0;
width: 20px;
text-align: center
}
.fields {
border-bottom: 1px solid #000;
/*fix inline-block gap*/
font-size: 0
}
label {
padding: 0 10px;
/*whatever you want */
font-size: 16px;
}
.row:first-of-type label {
width: 50%;
display: inline-block
}
.row:first-of-type label:not(:last-of-type) {
border-bottom: 1px solid red;
padding-bottom: 10px
}
.row:first-of-type label:last-of-type {
margin-top: 10px
}
.row:last-of-type .lineNumber,
.row:last-of-type .fields {
border-bottom: 0
}
<div class="form">
<div class="row">
<div class="lineNumber">1</div>
<div class="fields">
<label for="field1">Field 1
<input id="field1" />
</label>
<label for="field2">Field 2
<input id="field2" />
</label>
<label for="field3">Field 3
<input id="field3" />
</label>
</div>
</div>
<div class="row">
<div class="lineNumber">2</div>
<div class="fields">
<label for="field1">Field 4
<input id="field1" />
</label>
</div>
</div>
</div>