最适合容器的子 div（行和列）答案

【问题标题】：Best fit child divs to container (rows and columns)最适合容器的子 div（行和列）
【发布时间】：2020-10-15 12:11:51
【问题描述】：

我正在尝试找出基于父容器中的可用空间自动调整 div 大小的最佳方法，以避免出现一堆空白。我也希望，无论存在多少 div，该解决方案都能正常工作（即，数量会随着时间而变化）。

它不一定要完美契合，也可以使用垂直滚动，但我会尽量避免留白。我玩弄了这个脚本，它让我很接近，但我觉得使用 css-grids 自动调整大小功能有更好的解决方案：

if (size.width > size.height && divCount.length < 13) {
  columnSize = Math.round(12 / (divCount.length / 2));
}
if (size.width < size.height && divCount.length < 13) {
  columnSize = 6;
}
let colClass = 'col-6 col-sm-4 col-md-' + columnSize;

Starter File，对于缺少代码，我深表歉意——我真的不知道从哪里开始： https://codepen.io/liamb/pen/KKVqvdz

【问题讨论】：

标签： css vue.js bootstrap-4 css-grid

【解决方案1】：

不确定您希望达到的准确结果。但是有一些想法。

您可以使用 .container-fluid 类而不是 .container 来获取完整宽度。
如果你想要方形的col - 我做了一个例子，如何使用padding-top

.container-fluid{
  background: yellow;
  width: 100vw;
  height:100vh;
}
.row{
  padding:15px;
  height: 100%;
}
.row > div {
  border: 1px solid #000;
  padding: 0;
}
.row > div::after {
  content: '';
  display: block;
  position: relative;
  z-index: 1;
  padding-top: 100%;
} 
.row > div .col-in {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col-3">
      <div class="col-in">
        Div 1
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 2
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 3
      </div>
    </div>
    <div class="col-3">
      <div class="col-in">
        Div 4
      </div>
    </div>
  </div>
</div>

这是使用grid-template-columns 和auto-fill 和auto-fit 的示例（尝试调整其大小以获得最佳体验）。

body {
  padding: 1em;
}

hr {
  margin: 50px;
}

.grid-container {
    display: grid;
    /*just to resize the example, optional*/
    resize: horizontal;
    overflow: hidden;
}

.grid-container-fill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.grid-container-fit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.grid-element {
  background-color: #000;
  padding: 20px;
  color: #fff;
  border: 1px solid #fff;
}

<h2>auto-fill</h2>
<div class="grid-container grid-container-fill">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

<hr>

<h2>auto-fit</h2>
<div class="grid-container grid-container-fit">
  <div class="grid-element">
    1
  </div>
  <div class="grid-element">
    2
  </div>
  <div class="grid-element">
    3
  </div>
  <div class="grid-element">
    4
  </div>
  <div class="grid-element">
    5
  </div>
  <div class="grid-element">
    6
  </div>
  <div class="grid-element">
    7
  </div>
</div>

虽然我写了一个有趣的solution for a square shaped parent。

如果以上所有信息都不能让您满意 - 请描述

【讨论】：

【解决方案2】：

如果不使用 js，使用 flex 怎么样。为简单起见，我使用顺风：

<div class="flex h-screen flex-wrap">
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 1
    </div>
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 2
    </div>
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 3
    </div>
    <div class="w-full md:w-1/2 h-full border bg-yellow-200 p-4">
      Div 4
    </div>
</div>

在操场上查看完整示例：https://jsfiddle.net/denisstukalov/vgzt2Lep/12/

【讨论】：