グリッドレイアウトで表を作ると便利だった
こんな感じにしたいとき、グリッドを使ってみたら便利だったので、めも。
ほかにもっと良い書き方があるかもだけど。
HTML
|
1 2 3 4 5 6 7 8 |
<dl class="kakaku"> <dt>賃料<dt> <dd>25.5万円</dd> <dt>管理費</dt> <dd>3.5万円</dd> <dt>敷金・礼金</dt> <dd>3ヶ月・2か月</dd> </dl> |
PC CSS
|
1 2 3 4 5 6 |
.kakaku{ display: grid; grid-template-columns: repeat(3, 1fr); /* 子要素の横幅 */ grid-template-rows: repeat(2, auto); /* 子要素の高さ */ grid-auto-flow: column; /* 縦方向の並び */ } |
スマホ CSS
|
1 2 3 4 |
.kakaku{ grid-template-columns: repeat(2, 1fr); /* 子要素の横幅 */ grid-auto-flow:row; /* 縦方向の並び 初期値に */ } |
