Grid布局问题：新增元素无法固定在左侧列的技术咨询

• 需求：
  1. 初始状态下，class为details的容器包含info、description、gallery、amenities、important、sidebar元素；
  2. 除sidebar外，所有元素显示在左侧列，sidebar固定在右侧列。
• 当前问题：新增的动态元素（如class为details__test的div）需始终排列在左侧列，但当前布局中新增元素会交替出现在左右列，不符合需求。
• 布局设计原因：移动端场景下，sidebar需要能够调整到左侧元素的任意位置（上方或下方）。

当前Grid布局仅为固定元素指定了grid-area，未定义的新增元素会被Grid自动填充到剩余网格位置，导致左右交替的问题。推荐采用自动流+固定侧边栏列的方案，适配任意数量的新增元素：

1. 移除原grid-template-areas的显式行定义，让Grid自动管理行排列；
2. 给details__sidebar设置grid-column: 2，固定其在右侧第二列；
3. 其他所有元素（包括新增的details__test）默认会流入左侧第一列，自动从上到下依次排列；
4. 移动端布局调整为单列，让sidebar回到第一列即可。

HTML（无需修改） #

<section class="l-section l-section--details">
 <div class="l-wrapper">
   <div class="details">
     <div class="details__info">info</div>
     <div class="details__description">lorem ipsum lorem dorum lorem test lorem dorum lorem test lorum dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem ipsum lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem ipsum lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem ipsum lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test lorem dorum lorem test </div>
     <div class="details__gallery">gallery</div>
     <div class="details__amenities">amenities</div>
     <div class="details__important">important</div>
     <div class="details__test">test 1</div>
     <div class="details__test">test 1</div>
     <div class="details__test">test 1</div>
     <div class="details__test">test 1</div>
     <div class="details__test">test 1</div>
     <div class="details__sidebar">
       <div class="details__sidebar-content">
         <div class="details__sidebar-price">sidebar content price</div>
         <div class="details__sidebar-buttons">sidebar content buttons</div>
         <div class="details__sidebar-icons">sidebar content icons</div>
         <div class="details__sidebar-more">sidebar content more sidebar content more</div>
       </div>
     </div>
   </div> 
 </div>
</section>

<section class="l-section l-section--details-others">
 <div class="l-wrapper">
   <div class="details-others">
     details others
   </div> 
 </div>
</section>

CSS（修改部分已标注） #

html, body {
 margin: 0;
 padding: 0;
}

body {
 width: 500px;
 border: 3px solid black;
}

.l-section--details {
 margin: auto;
 margin: 30px 10px 10px 10px;
}

.l-section--details-others {
 margin: 10px;
 text-align: center;
}

.details {
 display: grid;
 grid-template-columns: 0.7fr 0.3fr;
 grid-auto-rows: min-content;
 gap: 0 100px;
 /* 移除原有的grid-template-areas，改用Grid自动流 */
 
 & > * {
   padding: 2px;
   margin: 10px;
 }
   
 &__info {
   background: red;
 }
 
 &__description {
   background: green;
 }
 
 &__gallery {
   background: blue;
 }
 
 &__amenities {
   background: orange;
 }
 
 &__important {
   background: purple;
 }
 
 &__sidebar {
   position: relative;
   grid-column: 2; /* 固定侧边栏在第二列 */
   align-self: start; /* 侧边栏顶部对齐 */
 }
 
 &__sidebar-content {
   position: sticky;
   top: 30px;
   background: gold;
 }
 
 &__test {
   background: cyan; /* 新增背景色便于区分 */
   width: 100%;
 }
 
}

@media screen and (max-width: 1024px) {
 .details {
    grid-template-columns: 1fr; /* 移动端切换为单列布局 */
 }
 
 .details__sidebar {
   grid-column: 1; /* 移动端侧边栏回到第一列 */
 }
}

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