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

Question

我在一个网格中嵌套了两个网格。不幸的是，右边的嵌套网格.grid-3设置行的高度，以使左边和右边的网格都具有相同的高度，额外的空间在class的div之间共享.right。如何设置右侧嵌套网格的行以调整内容的大小，使其与左侧嵌套行的高度相同？

div {

  border: 1px dotted black;

}

.grid-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-auto-rows auto;

}



.grid-3 {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-auto-rows auto;

}



.left {

  background-color: red;

}



.right {

  background-color: green;

}


<div class="grid-2">

      <div class="grid-2">

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

     </div>

     <div class="grid-3">

         <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

     </div>

</div>

Answer 1

您可以尝试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 class="grid-2">

      <div class="grid-2">

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

     </div>

     <div class="grid-3">

         <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">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; /* min-content*/

}



.grid-3 {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-auto-rows: max-content; /* min-content*/

}



.left {

  background-color: red;

}



.right {

  background-color: green;

}


<div class="grid-2">

      <div class="grid-2">

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

        <div class="left">L</div>

     </div>

     <div class="grid-3">

         <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

        <div class="right">R</div>

     </div>

</div>