CSS Grid嵌套项列对齐：如何统一多主行左侧列宽度

Absolutely, you can fix this with pure CSS—no JavaScript required! The issue right now is that each .main-row is creating its own separate grid, so every .left-box only sizes to its own content. That’s why your right-side 1B* boxes aren’t aligning vertically across rows. Here’s how to fix it with two approaches, depending on your browser support needs:

Solution 1: CSS Subgrid (Modern Browsers) #

This is the cleanest approach, using CSS Grid's subgrid feature to make all left columns inherit the same width from the top-level grid. Subgrid is supported in Chrome 117+, Firefox 71+, and Safari 16+.

Adjust your CSS like this:

.body {
  display: grid;
  /* First column auto-adjusts to the widest left content; second takes remaining space */
  grid-template-columns: max-content 1fr;
  width: 100%;
  gap: 10px; /* Cleaner spacing than padding on individual boxes */
}

.main-row {
  grid-column: 1 / -1; /* Span both columns of the parent grid */
  display: grid;
  grid-template-columns: subgrid; /* Inherit parent's column tracks */
  padding: 10px 0;
  border-bottom: 2px solid rgb(150, 150, 150);
}

.left-box {
  display: grid;
  grid-auto-rows: 1fr; /* Optional: Make sub-rows same height within the box */
  gap: 5px; /* Replace sub-row margins with gap for better spacing control */
}

.right-box {
  display: grid;
  grid-auto-rows: 1fr; /* Match left-box's row heights */
  gap: 5px;
  padding: 0 10px;
}

.sub-row {
  display: flex;
  align-items: center;
  background-color: rgb(150, 150, 150);
  padding: 5px;
  border-radius: 5px;
  /* Remove margin: 5px; since we're using gap on parent boxes */
}

Your original HTML stays exactly the same—no changes needed here. The subgrid ensures every .left-box uses the same top-level column, which automatically expands to fit the widest left content across all rows.

Solution 2: Fallback for Older Browsers (No Subgrid) #

If you need to support older browsers that don’t have subgrid, you can restructure things slightly to place left/right boxes directly in the top-level grid. This way, they naturally share column widths.

Adjusted HTML:

<html>
<body class='body'>
  <!-- Main Row 1 -->
  <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>

  <!-- Divider between main rows -->
  <div class='main-divider'></div>

  <!-- Main Row 2 -->
  <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>
</body>
</html>

Fallback CSS:

.body {
  display: grid;
  grid-template-columns: max-content 1fr;
  width: 100%;
  gap: 10px;
}

.left-box {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 5px;
  padding: 10px 0;
}

.right-box {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 5px;
  padding: 10px 10px;
}

.sub-row {
  display: flex;
  align-items: center;
  background-color: rgb(150, 150, 150);
  padding: 5px;
  border-radius: 5px;
}

.main-divider {
  grid-column: 1 / -1;
  height: 2px;
  background-color: rgb(150, 150, 150);
  margin: 0;
}

How Both Approaches Work #

In either case, the top-level grid defines a single set of columns: the first adapts to the widest left content, and the second fills the remaining space. This ensures all right-side boxes line up perfectly, and the layout stays responsive—if the widest left content changes, the column width adjusts automatically.

内容的提问来源于stack exchange，提问作者MoSheikh