1

I have three nested grids each containing rows where the content height is dynamic.

When a new row begins, I would like it to align with rows from the other nested grids.

It is not important the row numbers match up. It is also not important that nested grids are used and the markup can be changed. I ended up thinking this was the best way to solve the problem.

Desired outcome:

enter image description here

Here is a Codepen

.grid,
.sub-grid {
  display: grid;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.sub-grid {
  align-content: flex-start;
  grid-auto-rows: minmax(30px, auto);
}

.row {
  border-bottom: 1px solid #000;
}
<div class="grid">
  <div class="sub-grid">
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
  </div>
  <div class="sub-grid">
    <div class="row">Row 1</div>
    <div class="row">Row 2</div>
    <div class="row">Row 3</div>
    <div class="row">Row 4</div>
    <div class="row">Row 5</div>
    <div class="row">Row 6</div>
  </div>
  <div class="sub-grid">
    <div class="row">
      Row 1 contents is longer<br />
      But the next<br />
      row should begin<br />
      inline with another row<br />
    </div>
    <div class="row">
      Row 2<br />
      I should align with another row
     </div>
    <div class="row">Row 3</div>
    <div class="row">Row 4</div>
    <div class="row">Row 5</div>
  </div>
</div>
Moz Morris
  • 6,681
  • 2
  • 20
  • 18
  • Are you open to use some javascript? I really have no idea how to do it using CSS only. But, well, good question indeed! :-) – ReSedano Oct 22 '19 at 06:48
  • @ReSedano thanks for your comment. I think using JS is my only option. I was hoping there was a grid/flex property that could achieve this but it's looking unlikely. – Moz Morris Oct 22 '19 at 08:11
  • Don't despair! Maybe there is some secret technique that only CSS Jedi can know... :-) – ReSedano Oct 22 '19 at 08:20
  • 1
    Not currently possible until `display:subgrid` is properly supported - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Oct 22 '19 at 10:49
  • @Paulie_D thank you for the link - JS it is then. – Moz Morris Oct 22 '19 at 15:34

0 Answers0