CSS网格-自动调整高度行，调整内容大小

CSS网格-自动调整高度行，调整内容大小

您可以尝试

minmax(min-content, max-content)

参考

div {  border: 1px dotted black;}.grid-2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  grid-auto-rows: minmax(min-content, max-content);}.grid-3 {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-auto-rows: minmax(min-content, max-content);}.left {  background-color: red;}.right {  background-color: green;}<div >      <div >        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>     </div>     <div >         <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>     </div></div>

您也可以只使用

max-content

或

min-content

div {  border: 1px dotted black;}.grid-2 {  display: grid;  grid-template-columns: repeat(2, 1fr);  grid-auto-rows: max-content; }.grid-3 {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-auto-rows: max-content; }.left {  background-color: red;}.right {  background-color: green;}<div >      <div >        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>        <div >L</div>     </div>     <div >         <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>        <div >R</div>     </div></div>