您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站
问答- 问题:CSS网格-自动调整高度行，调整内容大小

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 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>
CSS 2022/1/1 18:18:04 有386人围观

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进，让解决方法与时俱进

请先登录

推荐问题

联系我

联系我

602392714

清零编程清零编程群

置顶