我有這些要求:

在開始，我有這樣的元素:信息，描述，畫廊，設施，重要的，側邊欄-在div與類:細節。 除了側邊欄，所有項目都在左邊，側邊欄在右邊。 我做不到:

新添加的元素，例如，帶有類test的div應該總是在左邊——新元素的數量是無法計算的。-目前，一個元素被添加到左列一次，右列一次，這對我來說是一個錯誤。

為什么是這樣的結構？因為在移動側邊欄上，它可以位于左側任何元素的上方或下方。

代碼筆: 鏈接到代碼片段

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";
 }
}