How to align columns in nested HTML using CSS grid

Question

I need to use a grid, but my columns are not direct children of the grid. The grid has two columns:

Column 1 contains the label.
Column 2 contains the input box.

The label column should be as large (but not larger) than the largest column. The input column should use all remaining space. I attempted the following CSS/HTML combo.

* {
  border: 1px solid black;
  background: #2222;
}

.container {
  display: grid;
  width: 550px;
  grid-gap: 10px;
  grid-template-rows: [a] auto [b] auto [c] auto;
  grid-template-columns: [label] auto [input] 1fr;
  align-items: stretch;
}

label { grid-column-start: label; }
input { grid-column-start: input; }

.a { grid-row-start: a; }
.b { grid-row-start: b; }
.c { grid-row-start: c; }

<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>

I understand that the grid-column-start isn't used, because the elements are not direct children of the grid. But how can I accomplish this functionality without hardcoding the label width or use Javascript?

Using multiple grids (one per row) would be fine, but I would need to synchronized the widths of the first column. I have read about subgrids, but it's not implemented by any major browser yet. Do I have other alternatives to solve this issue?

why you need to use css-grid? this a clear table layout

Temani Afif
– Temani Afif

2019-01-10 21:52:43 +00:00
Commented Jan 10, 2019 at 21:52 — Temani Afif
– Temani Afif, Commented Jan 10, 2019 at 21:52

Temani Afif · Accepted Answer · 2019-01-10 21:55:27Z

3

This seems to be more suitable for table layout than CSS grid:

* {
 box-sizing:border-box;
}
.container {
  display: table;
  width: 550px;
  border:1px solid;
}

.container>div {
  display: table-row;
}

label,
input {
  display: table-cell;
  border:1px solid green;
}
label {
  width:5%; /*a small value*/
  white-space:nowrap;
}
input {
 width:100%;
}

<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>

answered Jan 10, 2019 at 21:55

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Temani Afif Over a year ago

@hyperdrive add you solution using CSS grid or flexbox if it's possible

TWS · Accepted Answer · 2020-09-04 07:57:51Z

1

If the browser support is enough for you, there is the display: contents to 'exclude' the wrapper elements from the rendering and only shows their content (similar to display: none, none of any other properties will appear on the parent (like background, margin, padding.. etc), but it will keep the child elements in play) -> the children will use the parent's grid layout references to align themself.

* {
  border: 1px solid black;
  background: #2222;
}

.container {
  display: grid;
  width: 550px;
  grid-gap: 10px;
  grid-template-rows: [a] auto [b] auto [c] auto;
  grid-template-columns: [label] auto [input] 1fr;
  align-items: stretch;
}

label { grid-column-start: label; }
input { grid-column-start: input; }

.a { grid-row-start: a; display: contents; }
.b { grid-row-start: b; display: contents; }
.c { grid-row-start: c; display: contents; }

<div class="container">
  <div class="a">
    <label>A</label>
    <input>
  </div>
  <div class="b">
    <label>Label B</label>
    <input>
  </div>
  <div class="c">
    <label>Longest C label</label>
    <input>
  </div>
</div>

answered Sep 4, 2020 at 7:57

TWS

564 bronze badges

2 Comments

mad.meesh Over a year ago

just want to point out that though display: contents may work for simple use cases, it effectively removes the box of the element it's set on. this has many implications but as an example: if the container has display: grid and the children display: contents, you cannot dictate the height of the children because they don't have a box! height is just one property, but there are many more that fail. it's just something to be aware of as once you add any amount of complexity this solution quickly degrades.

vsync Over a year ago

seems like few things are not needed: grid-template-rows & grid-row-start per child & grid-column-start for the label... still works the same without them

Collectives™ on Stack Overflow

How to align columns in nested HTML using CSS grid

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related