Question

我有一个要在3列内显示的数组。一旦第一列被填充，我希望它开始填充第二行，以至第三行。

我的问题是，当前代码列的数量相等（6x，6x，6x），但是我们的愿望是填充第一列，直到max（100％height或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;
}

Codepen： https://codepen.io/Arasto/pen/PoZmoqy

Answer 1

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

唤醒示例： https://codepen.io/Ajjarindahouse/pen/NWxjWaK

网格列自动填充

1 个答案: