如何实现两行Grid布局中所有单元格宽度匹配最宽单元格？

修改核心代码 #

只需将ul的display: grid改为display: inline-grid，保留grid-auto-columns: 1fr即可实现需求：

.container {
    overflow: hidden;
    background: #fafafa;
    width: 760px;
    margin: 0 auto;
    padding: 24px;
}

ul {
    overflow: auto;
    list-style: none;
    padding: 0;
    display: inline-grid; /* 关键修改：改为inline-grid */
    grid-gap: 8px;
    grid-auto-flow: column;
    grid-auto-columns: 1fr; /* 保留1fr让列宽均分 */
    grid-template-rows: repeat(2, 1fr);
}

li {
    border: 1px solid #eee;
    border-radius: 20px;
    padding-inline: 12px;
    display: flex;
    gap: 4px;
    align-items: center;
}

a {
    white-space: nowrap;
}

原理说明 #

1. inline-grid让容器宽度由内容决定，而非拉伸填满父容器，容器会自动以最宽单元格的宽度作为基准。
2. grid-auto-columns: 1fr让所有列均分容器总宽度，由于容器宽度由最宽单元格决定，所有列的宽度会统一匹配这个最宽值。
3. 配合grid-auto-flow: column和grid-template-rows: repeat(2, 1fr)，元素会按列优先排列成固定两行，超出容器宽度的部分可通过横向滚动查看。

完整HTML（无需修改） #

<div class='container'>
    <ul>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>text 1</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Text 2</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Text 3</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Fourth text</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Test 5 is is a huge text and all other cells should follow its size</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Text 6</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>This is also a large text</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Text 8</a>
        </li>
        <li>
            <img src='https://unsplash.it/50/50'>
            <a>Text 9</a>
        </li>
    </ul>
</div>

内容的提问来源于stack exchange，提问作者kellyEx