我有这些要求：
1.在开始时，我有这样的元素：* 信息，描述，画廊，设施，重要，侧栏 -在div with class： 详情 *。
1.除边栏外，所有项都在左边，边栏在右边。

• • 我无法实现**
• • 新增元素，例如class * test * 的div应该总是在左边-新元素的数量是无法计算的。- 目前，一个元素被添加到左列一次，右列一次，这对我来说是错误的。**
• • 如何（错误）：**

• • 我喜欢什么？（注意，测试在左列中位于彼此的下方）**

为什么是这样的结构？因为在移动侧边栏上，它可以在左侧的任何元素之上或之下。
Codepen：link to snippet
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 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 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-template-rows: auto auto;
 grid-auto-rows: min-content; /* OR min-content*/
 gap: 0 100px;
 
 grid-template-areas:
   "info sidebar"
   "description sidebar"
   "gallery sidebar"
   "amenities sidebar"
   "important sidebar";
 
 & > * {
   padding: 2px;
   margin: 10px;
 }
   
 &__info {
   background: red;
   grid-area: info;
 }
 
 &__description {
   background: green;
   grid-area: description;
 }
 
 &__gallery {
   background: blue;
   grid-area: gallery;
 }
 
 &__amenities {
   background: orange;
   grid-area: amenities;
 }
 
 &__important {
   background: purple;
   grid-area: important;
 }
 
 &__sidebar {
   position: relative;
   grid-area: sidebar;
   align-items: start;
 }
 
 &__sidebar-content {
   position: sticky;
   top: 30px;
   align-items: start;
   background: gold;
 }
 
 &__test {
   width: 100%;
 }
 
}

@media screen and (max-width: 1024px) {
 .details {
    grid-template-areas:
   "sidebar sidebar"
   "info info"  
   "description description"
   "gallery gallery"
   "amenities amenities"
   "important important";
 }
}