css - あるグリッド列を他の列よりも比例して大きくするにはどうすればよいですか?

2 番目の列が最初の列の 4 倍になるように、2 つの列を均等なサイズで作成する必要があります。

どうすればよいでしょうか?

main{
    display: grid;
    grid-template-columns: ???
    grid-gap: 10px;
    grid-auto-rows: minmax(50pc, auto);
}

次のように fr ユニットを使用する必要があります:

main{
    display: grid;
    grid-template-columns: 1fr 4fr
    grid-gap: 10px;
    grid-auto-rows: minmax(50pc, auto);
}

これにより、2 つの列が利用可能なスペースをすべて占有し、2 番目の列は最初の列の 4 倍のスペースを占めることになります。

2020 年 9 月 4 日 18:52 に回答

白い死神

468

5

銀バッジ 5 個

13 個

銅バッジ 13 個