Grid CSS: Buat baris baharu apabila kandungan kanak-kanak melebihi lebar lajur

Question

Saya mempunyai reka letak dua lajur berdasarkan Grid CSS. Saya mahu mencipta baris baharu apabila kandungan lajur kedua melebihi 1fr. Seperti yang sedia ada, kandungan hanya melimpahi lajur.

Satu keperluan reka letak ini ialah item dalam lajur kanan Saya mencapai ini dengan:

.right-menu {
  ...
  grid-auto-flow: padat lajur;
  ...
}

Jika saya mengalih keluar atribut grid-auto-flow Walau bagaimanapun, item kini disusun ke dalam berbilang baris, yang bukan yang saya mahukan.

Saya juga cuba menukar .right-menu

.right-menu {
  paparan: 'inline-flex';
}

Namun, hasilnya sama seperti sebelum ini. Lajur limpahan kandungan. Adakah terdapat cara untuk melakukan ini tanpa JavaScript? Pertanyaan media ditamatkan kerana ini berdasarkan kandungan, bukan lebar ruang pandang.

<code>.main-container {
  warna latar belakang: #ccc;
  padding: 1.0rem;
  lebar: 1200px;
  jidar: 1.0rem 0 0 1.0rem;
}

.menu-grid {
  paparan: grid;
  grid-template-columns: ulangi(autoisi, minmax(600px, 1fr));
  grid-template-rows: ulangi(autoisi, 1fr);
  grid-auto-flow: baris;
  jurang-baris grid: 1.0rem;
}

.left-menu {
  saiz fon: 1.25rem;
}

.right-menu {
  paparan: grid;
  warna latar belakang: putih;
  grid-template-columns: ulangi(autoisi, minmax(65px, 1fr));
  grid-auto-flow: padat lajur;
  jurang baris grid: 0.5rem;
  jurang-lajur grid: 0.75rem;
}

.item kanan {
  warna latar belakang: #fff;
  text-align: tengah;
  lebar min: 65px;
  sempadan: 1px hitam pejal;
}</code>

    

        
Left
            

                
Item: 1
                
Item: 2
                
Item: 3
                
Item: 4
                
Item: 5
                
Item: 6
                
Item: 7
                
Item: 8
                
Item: 9
                
Item: 10
                
Item: 11
                
Item: 12
                
Item: 13
        
    



            

Answer 1

Menggunakan Flexbox akan membawa tuah kepada anda

.main-container {
  background-color: #ccc;
  padding: 1.0rem;
  width: 1200px;
  margin: 1.0rem 0 0 1.0rem;
}

.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0rem;
}
.menu-grid > * {
  flex: 600px;
}
.left-menu {
  font-size: 1.25rem;
}

.right-menu {
  display: grid;
  background-color: white;
  grid-auto-columns: 65px;
  grid-auto-flow: column; 
  grid-row-gap: 0.5rem;
  grid-column-gap: 0.75rem;
}

.right-item {
  background-color: #fff;
  text-align: center;
  min-width: 65px;
  border: 1px solid black;
}

<div class="main-container">
    <div class="menu-grid">
        <div class="left-menu">Left</div>
            <div class="right-menu">
                <div class="right-item">Item: 1</div>
                <div class="right-item">Item: 2</div>
                <div class="right-item">Item: 3</div>
                <div class="right-item">Item: 4</div>
                <div class="right-item">Item: 5</div>
                <div class="right-item">Item: 6</div>
                <div class="right-item">Item: 7</div>
                <div class="right-item">Item: 8</div>
                <div class="right-item">Item: 9</div>
                <div class="right-item">Item: 10</div>
                <div class="right-item">Item: 11</div>
                <div class="right-item">Item: 12</div>
                <div class="right-item">Item: 13</div>
        </div>
    </div>
</div>