グリッドレイアウトで表を作ると便利だった

こんな感じにしたいとき、グリッドを使ってみたら便利だったので、めも。
ほかにもっと良い書き方があるかもだけど。

HTML

賃料

25.5万円
管理費
3.5万円
敷金・礼金
3ヶ月・2か月

PC CSS

.kakaku{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 子要素の横幅 */
    grid-template-rows: repeat(2, auto); /* 子要素の高さ */
    grid-auto-flow: column; /* 縦方向の並び */
}

スマホ　CSS

.kakaku{
    grid-template-columns: repeat(2, 1fr); /* 子要素の横幅 */
    grid-auto-flow:row; /* 縦方向の並び　初期値に */  
}