- 番号は一番桁数の多い数字の幅で固定されている
- 番号は右寄せされている
- 番号の横に表する項目部分は可変幅
という参考画像のようなリストをCSS Grid Layoutで作った。テーブルでも順序付きリストでもないんだよなという時にこれで。参考コードではTailwind CSSを使っている。
今回の参考画像のようなものであればテーブルで作るのが一番素直だと思う。
参考画像
参考コード
numbered-list.tsx
const items = [
'apple',
'orange',
'banana',
'grape',
'lemon',
'melon',
'strawberry',
'peach',
'pear',
'cherry',
'watermelon',
'pineapple',
];
export default function NumberedList() {
return (
<div className="grid gap-0 border w-1/2 m-4">
{items.map((item, i) => (
<div
key={i}
className="col-span-500 grid grid-cols-subgrid gap-2 border-b py-1 px-2 last:border-b-0"
>
<div className="tabular-nums text-right">{i + 1}</div>
<div>{item}</div>
</div>
))}
</div>
);
}
