ปัญหา CSS Grid หยุดการเพิ่มคอลัมน์ด้านข้าง [ซ้ำ]

Question

1 ต้องการความช่วยเหลือหรือคำอธิบายเกี่ยวกับกริด 1 มีคอลัมน์กริดสองคอลัมน์ เมื่อข้อความของเนื้อหาในตารางคอลัมน์หนึ่งของฉันเติบโตขึ้นคอลัมน์อื่นก็จะโตขึ้นเช่นกัน 1 ไม่ต้องการให้ความสูงคงที่สำหรับพวกเขาเพราะเนื้อหาจะเปลี่ยนไปเสมอ 1: จะหยุดสิ่งนี้ได้อย่างไร? นี่คือปากการหัสสำหรับเวอร์ชันสด - ตัวอย่างรหัสปากกา

 .container { 
        margin: 0 auto 0 auto;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0rem 2.4rem;
    }
    
    .main {
      grid-column: 1/ 9;
      background: red;
    }
    
    .side {
      grid-column : 9/13;
      background: red;
    }

 <div class="container">
          <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti voluptatem minima tenetur, quidem consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
            consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
          </div>
          <div class="side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsum.
          </div>
      </div>

Answer 1

มันจะพอเพียงกับการตั้งค่าheight: fit-content;ในคอลัมน์. side

Answer 2

Anwser simple: คุณทำไม่ได้! ตารางเป็นเหมือนตาราง ถ้าเส้นตารางจากความสูงของแถวถูกตั้งค่าเป็นอัตโนมัติมันจะปรับ tp องค์ประกอบที่สำคัญที่สุดภายในแถวเดียวกัน

.container { 
        margin: 0 auto 0 auto;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0rem 2.4rem;
    }
    
    .main {
      grid-column: 1/ 9;
      background: red;
    }
    
    .side {
      grid-column : 9/13;
    }

.sideSub {
  background-color: red;
}

<div class="container">
          <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti voluptatem minima tenetur, quidem consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
            consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
          </div>
          <div class="side">
            <div class="sideSub">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsum.
            </div>
          </div>
      </div>

อย่างไรก็ตามคุณสามารถสร้าง diV ภายในเซลล์ตารางเพื่อจัดรูปแบบได้ตามที่คุณต้องการ