网格列自动填充

Question

我有一个数组，我想在 3 列中显示。第一列填满后，我希望它开始填充第二行，以此类推到第三行。

我的问题是，当前代码中的列获得了等量的 (6x, 6x, 6x)，但希望填充第一列直到最大（100% 高度或 x 数量），然后开始填充第二列，最后是第三列，如果数组足够长的话。

JSX

export const Home = () => {
    return (
        <div className="container">
            {
                myArray.map((p, i) => {
                    return <div className="titleName" key={i}>{p.name}</div>
                })
            }
        </div>
    )
}

const myArray = [
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
    { name: "lol", age: 12 },
]

CSS

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: white;
}

代码笔： https://codepen.io/Arasto/pen/PoZmoqy

Answer 1

您可以在 <div id="root"> 上使用 css column-count: 3; 这会使文本分为 3 列。 column-fill: auto; 完全填充该列，然后继续到下一列，因此它们不会得到相等的数量。

工作示例： https://codepen.io/Ajjarindahouse/pen/NWxjWaK

网格列自动填充

Grid column autofill

css

grid