I've tried and ended up withi have this
but I'm aiming for something more like the design shown in this imagedesign
his means I want each item to only take up the space it needs, rather than expanding to match the size of the largest item in the row. Is there a way to achieve this?
my code :
'use client';import React from 'react';import { Box } from '@mui/material';import { SxProps, Theme } from '@mui/material/styles';import Typography from '@mui/material/Typography';import Container from 'shared/layout/Container';type Props = { sx?: SxProps<Theme>; cards: { title: string; items: string[]; }[];};const NoiceList: React.FC<Props> = ({ cards, sx }) => (<Container sx={{ mt: 50, }}><Box sx={{ display: 'flex', flexDirection: 'column', gap: 6, }}> {cards.map((card) => (<Box sx={{ border: '1px solid #9F9F9F', p: 6, }}><Box key={card.title}><Typography variant="body2" sx={{ mb: 3 }}>{card.title}</Typography><Box component="ul" sx={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr) )', }}> {card.items.map((item) => (<Box component="li" sx={{ display: 'flex', alignItems: 'baseline', gap: 2, py: 1, px: 2, }} key={item}><Box sx={{ height: 7 }}><Box sx={{ backgroundColor: 'secondary.400', width: 4, height: 4, borderRadius: '100%' }} /></Box><Typography variant="body2" color="secondary.500" sx={{ lineHeight: 'normal' }}>{item}</Typography></Box> ))}</Box></Box></Box> ))}</Box></Container>);export default NoiceList;