假设我们有n个项目，我们必须在网格布局中的列中对这些项目进行排序。列数是固定的，我们还必须确保网格布局具有最小行数，以便有效地填充网格。在本文中，我将数字视为项目。并根据我们的要求将1-13之间的数字排列成网格布局。列数固定为三。我将使用React和SCSS(SassyCSS)来演示这一点。如果非要按行排列，那就很简单了。就用CSS吧，代码如下：完整的代码，包括CSS部分如下：输出效果：可以看到，数字是按行排列的。在这里，网格项目水平流动，并根据需要自动创建新行。当网格项流到达列的末尾时，将创建一个新行。这也称为行优先，因为下一行仅在前一行完全填充时才开始。但是我们的需求是按列排列项目，所以为了按列排列项目，我们需要知道网格布局中的行数。我可以解释为什么你需要知道行数。在逐行排列中，只有当上一行完全填满（即上一行的项目数已经等于列数）时，才开始下一行。类似地，在逐列排列中，直到前一列完全填满（即前一列中的项目数已经等于行数）后，新的一列才会开始。因此，我们需要知道有多少行。所以问题是，我们如何知道网格布局中的行数？它可以通过基础数学来学习。…我们现在知道网格项目的数量以及列的数量。因此，我们可以用这个公式Math.ceil(itemsCount/columnsCount)来最小化行数，为什么要最小化行数，因为如果我们使用一个更大的随机整数作为行数，网格将不会有效填充，整个布局中会有一些格子无法填充。下面的CSS代码是按列排列的，由于我们要动态设置grid-template-rows字段，所以下面的代码中不存在这个字段：完整的代码，包括CSS部分，如下：可以看到它在16行，将计算行数。在第17行，grid-template-rows字段是动态设置的。在这里，您可以看到数字排列成固定列数(3)的列。同样，最小化的行数是五。如果行数少于五，则无法排列。并且如果行数大于五，布局中就会有未填充的空白区域。只有当前一列完全填满时，一列才会开始。这个技巧通过计算要进入网格布局的行数并动态设置它，非常容易地解决了这个问题。由于我们需要知道列中的行数，所以可以说在排列项目时需要知道行数和列数来解决这个问题。注意：当布局的宽度（而不是列数）固定时，可以使用相同类型的解决方案。
