[css]gridで等分（1fr）したのにはみ出したり等分担ってなかったりしたときの対処法

flexばっかり使ってるからgridあんまりわかってないのよね。

症状というか
対処法

症状というか

こういう感じに組んでいて

<div class="container">
    <ul class="list">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

こんな感じにスタイルを当てた

.container{
    width: calc(100% - 8vw);
    max-width: 1200px;
    margin: 0 auto;
    ul.list{
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-left: 2px solid #000;
        gap: 4vw;
        li{
            padding: 4vw;
        }
    }
}

あんまり厳密に書くとよろしくない感じなので省いたけど省いたせいでネックの部分が入ってないかもしれない。

で、そんな感じで組んで、ブラウザで見たらgridが指定領域（.container）からはみ出していたし、gridの中身（li）の幅がまちまちになっていた。

対処法

これを

grid-template-columns: repeat(3, 1fr);

こうする

grid-template-columns: repeat(3, minmax(0,1fr));

そしたら等分された。

参考：https://memoruka.net/css-grid-1fr-column-overflow/