css grid 布局 fr 关键词引发的问题

• #css

一、fr 存在的问题

使用 CSS Grid 布局实现如下效果代码写起来非常简单与优雅。

代码如下：

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 10px;
        border: 1px solid red;
        max-width: 500px;
    }

    .item {
        border: 1px solid #666;
    }
</style>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

grid-template-columns: repeat(4, 1fr) 的含义是总共有 4 列，1fr 表示每列宽度都是相同的。

如果第一列的内容非常多，就会出现问题，第一列会挤压其它列的宽度，每一列的宽度不再相等。此时 fr 属性好像”失效”了。

二、解决

需求是希望每列宽度相等，内容太长时显示省略号，grid-template-columns 属性值需稍加修改。

计算公式: (100% - (列数 - 1) * 列与列之间的间距) / 列数 = 每列宽度

<style>
    .container {
        --column-count: 4;
        --gap: 10px;

        display: grid;
        grid-template-columns: repeat(var(--column-count), calc((100% - (var(--column-count) - 1) * var(--gap)) / var(--column-count)));
        grid-gap: var(--gap);
        border: 1px solid red;
        max-width: 500px;
    }

    .item {
        border: 1px solid #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="container">
    <div class="item">12345678901234567890</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
</div>

↶ 返回首页 ↶