1

I'm trying to achieve a flexible grid layout that wowuld allow for a two-column table with various row sections, each being split into a left and right segment.

Each segment would then have various subrows that align with each other.

I have a working example of this here:

.body {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-rows: 1fr;
  width: 100%;
}

.main-row {
  
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: max-content max-content;
  width: 100%;
  padding: 10px 0;
  border-bottom: 2px solid rgb(150, 150, 150);
  
}

.left-box {
  display: grid;
  grid-template-columns: auto
  grid-auto-rows: 1fr;
}

.right-box {
  display: grid;
  grid-template-columns: auto
  grid-auto-rows: 1fr;
  padding: 0 10px;
}

.sub-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
  background-color: rgb(150, 150, 150);
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
}
<html>
  <body class='body'>
    <div class='main-row'>
      <div class='left-box'>
        <div class='sub-row'> Testing this line </div>
        <div class='sub-row'> Also testing this line </div>
        <div class='sub-row'> Finally testing this line </div>
      </div>
      <div class='right-box'>
        <div class='sub-row'> 1B1 </div>
        <div class='sub-row'> 1B2 </div>
        <div class='sub-row'> 1B3 </div>
      </div>
    </div>
    <div class='main-row'>
      <div class='left-box'>
        <div class='sub-row'> Testing this longer line </div>
        <div class='sub-row'> Also testing this line </div>
        <div class='sub-row'> Finally testing the longer line </div>
      </div>
      <div class='right-box'>
        <div class='sub-row'> 1B1 </div>
        <div class='sub-row'> 1B2 </div>
        <div class='sub-row'> 1B3 </div>
      </div>
    </div>
  </body>
</html>

There is one change I would like to make, however, that I'm having trouble with, which is ensuring that the left-box segments in the first main-row segment are the same size as the left-box segments in the second main-row segment. This would make it so that all the smaller "1B*" boxes would be aligned vertically as well. Since I'd like to do this in a responsive manner, I need the body's left column size to be upated to the maximum of the left-segments within the main-rows.

Is this possible with CSS only or would JS be required to achieve this?

Thank you.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
MoSheikh
  • 769
  • 1
  • 11
  • 20
  • 1
    You will need JS or `subgrid` to manage this. - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Aug 19 '20 at 12:15
  • 1
    Frankly though, if this is a `table` ...why not just use one.? – Paulie_D Aug 19 '20 at 12:21
  • Thank you @Paulie_D - the reason I went for a grid is that I'm building a SPA and wanted keep flexibility to add some non-table elements within the layout in the future, eg expandable rows. I don't expect the layout to fit completely within a table format in the future. – MoSheikh Aug 19 '20 at 13:28

0 Answers0