How to Make Two Flex Columns Behave like a Table in CSS?

Question

I don't believe that what I'm asking for is yet achievable in pure CSS but I'm going to ask anyway in hopes there is another approach or something I'm missing.

Here is an illustration of my current layout, achieved with flexbox:

This works perfectly. But what if I add more content to column 1, below the "column within column" div. And then I want to also add content to Column 2, but I want it to occupy the same vertical space as the item I've just added to column 1? In other words, as if everything was a table and those items where in the same row in adjacent table cells?

This is a common issue when laying out forms for example, where you want to group items (city, state, zip) in columns and you want to track things side by side down the form.

(I've just got the gray borders around the columns to help delineate the markup, but typically their would not be borders between the columns on a multi-column form layout)

So, the end result would appear as in the second image below:

Here is the structural HTML for the demo:

.container {
  display: flex;
}

.column {
  flex-grow: 1;
  /* fill parent space based on child content */
  flex: 1 1 0;
  /* fill parent space equally regardless of child content*/
}

.column.row {
  display: flex;
  flex-wrap: wrap;
}

.column.row div {
  flex-grow: 1;
}

.column.row h2 {
  width: 100%;
}

<div class="container">
  <div class="column">
    <h1>Column 1 Layout Goes here</h1>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field</div>
    <div class="column row">
      <h2>Column within column</h2>
      <div>Form Field</div>
      <div>Form Field</div>
      <div>Form Field</div>
    </div>
    <div>Form Field "Y" Added</div>
  </div>
  <div class="column">
    <h1>Column 2 layout goes here</h1>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field Should Track with Form Field "Y" but How?</div>
  </div>
</div>

It just occured to me that I could opt to add another container element below the first, that would essentially create the equivalent of a table row at the start of the elements that need to track vertically — Scott B, Aug 28 '19 at 13:43
No...that's what `subgrid` is for - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Aug 28 '19 at 14:05

Johannes · Answer 1 · 2019-08-29T10:59:46.897

You can make the .column elements flex-containers (i.e. apply display: flex also to the .column elements) which have flex-direction: column; and apply margin-top: auto; to the last div of the second column to move it to the bottom of its container:

.container {
  display: flex;
}

.column {
  flex-grow: 1; /* fill parent space based on child content */
  flex: 1 1 0; /* fill parent space equally regardless of child content*/
  display: flex;
  flex-direction: column;
}

.column.row {
  display: flex;
  flex-wrap: wrap;
}

.column.row div {
  flex-grow: 1;
}

.column.row h2 {
  width: 100%;
}
.column > div:last-child {
margin-top: auto;
}

<div class="container">
<div class="column">
  <h1>Column 1 Layout Goes here</h1>
  <div>Form Field</div>
  <div>Form Field</div>
  <div>Form Field</div>
  <div class="column row">
    <h2>Column within column</h2>
    <div>Form Field</div>
    <div>Form Field</div>
    <div>Form Field</div>
  </div>
  <div>Form Field "Y" Added</div>
</div>
<div class="column">
  <h1>Column 2 layout goes here</h1>
  <div>Form Field</div>
  <div>Form Field</div>
  <div>Form Field</div>
  <div>Form Field Should Track with Form Field "Y" but How?</div>
</div>

I've upvoted your answer. The margin top is a clever technique. However, what if I need to add another form element to column 1, below the "Y" element? In this case, the adjacent fields are no longer tracking since the last-child of column 2 always moves to the bottom of the container. As of now, I think the only answer is to start a new container to equate the equivalent of a new table row. — Scott B, Aug 28 '19 at 14:00

How to Make Two Flex Columns Behave like a Table in CSS?

1 Answers1