假设我们有n 个项目，并且我们必须在网格布局中将这些项目按列排序。列数是固定的，我们还必须确保网格布局中的行数最少，以便有效填充网格。在本文中，我把数字视为项目。并且根据我们的要求在网格布局中排列1-13之间的数字。列数固定为三。我将使用 React和SCSS(Sassy CSS)对此进行演示。
1、如果必须按行排列，那将是非常简单的。用CSS就可以了，代码如下所示：
完整的代码，包括CSS部分，如下所示：
输出效果
如你所见，数字按行排列。在这里，网格项目沿水平方向流动，并根据需要自动创建新行。当网格项目流达到列尾时，将创建一个新行。这也称为行优先排列，因为只有在前一行完全填满时
在CSS网格布局中，有效地填充项目到固定列数的列是一项关键任务，特别是当我们希望保持行数最少以优化空间利用时。在这个问题中，我们有13个数字（项目）需要按照列优先的方式排列，列数固定为3。通常，CSS网格布局默认采用行优先的流式布局，即项目沿水平方向流动，当一行填满后自动开始新的一行。然而，为了实现列优先的布局，我们需要对行数进行计算和动态调整。
理解CSS网格布局的基础概念至关重要。CSS Grid Layout是一种二维布局系统，允许我们创建网格并精确地放置内容，包括定义行和列的数量、大小以及项目在网格中的位置。在传统的行优先排列中，`grid-template-columns`定义了列的数目，而`grid-auto-rows`或`grid-template-rows`定义了行的数目和大小。
对于列优先的排列，我们需要计算出最小的行数。这可以通过将项目总数除以列数并向上取整来实现，即使用`Math.ceil(itemsCount / columnsCount)`。在这个例子中，由于我们有13个项目和3列，行数应为`Math.ceil(13 / 3)`，结果为5行，这是能有效填充所有项目的最小行数。
在CSS代码中，我们将不再直接指定`grid-template-rows`，而是动态计算行数并在JavaScript中设置它。例如，我们可以创建一个CSS类，然后在React组件的`componentDidMount`或`useEffect`钩子中根据计算出的行数添加这个类。这样，CSS网格布局就会自动创建对应数量的行，项目将按列填充。
以下是示例代码片段：
```jsx
import React from 'react';
import './styles.css';
const App = () => {
// 假设itemsCount和columnsCount已经在组件的state中
const itemsCount = 13;
const columnsCount = 3;
const rowsCount = Math.ceil(itemsCount / columnsCount);
useEffect(() => {
document.querySelector('.grid-container').style.setProperty('--rows-count', rowsCount);
}, [rowsCount]);
return (
<div className="grid-container">
{/* 13个数字元素 */}
</div>
);
};
export default App;
```
在SCSS文件中，我们可以设置动态行数：
```scss
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); // 固定列数为3
grid-auto-flow: column; // 按列填充
grid-gap: 10px;
/* 使用CSS变量动态设置行数 */
--rows-count: 5; // 这将在React组件中动态更新
grid-template-rows: repeat(var(--rows-count), 1fr);
}
```
如上所述，这种技术通过计算和动态设置行数，使得在CSS网格布局中按列填充项目变得简单。这种方法尤其适用于需要响应式设计的情况，因为当布局宽度改变时，可能需要重新计算行数以适应新的列数。理解CSS网格布局的行与列的概念，以及如何利用它们来实现特定的布局需求，是现代Web开发中的重要技能。
