Styling Grid to have more elements than text - css

Question

I have grid from material UI:
Item element
const Item = styled(Paper)(({theme}) => ({
...theme.typography.body2,
padding: theme.spacing(2),
textAlign: 'center',
color: "black",
}));
Structure
<div className="wrapper">
<Typography variant="h3" component="h3">
List of friends
</Typography>
<div className="friends">
<Grid container
direction="row"
rowSpacing={1}
spacing={{xs: 2, md: 3}} columns={{xs: 4, sm: 8, md: 12}}
alignItems="center"
justifyContent="center"
>
{
friends.map((friend, i) => {
return <Grid item xs={4} sm={6} md={6} mt={5}>
<Item className="item"><span>{i}</span>{friend.name}</Item>
</Grid>
})
}
</Grid>
</div>
</div>
With css:
.wrapper{
width: 100%;
position: relative;
align-items: center;
display: flex;
flex-direction: column;
background:#eaeaea
}
.friends{
position: relative;
width: 75%;
}
It looks like this:
However, i would like the number of friend, to be on the left, and highlighted like:
However, how to stile the <span> element to do this? The when i style span to be
span{
position: absolute;
left: 0
width:25%;
height: 100%
}
Then the span is somewhere else, as the material ui uses lot of styling that makes this hell.
when i change it to:
{
countries.map((friend, i) => {
return <Grid item xs={4} sm={6} md={6} mt={5} >
<span> i </span>
<Item className="item">{friend.name}</Item>
</Grid>
})
}
I would need to make adjustments to the Grid elements, adding position relative and such, but im not sure how this would work with responsivity.
Is there simple way to do this?
Or is there any other component i can use instead of Item(Paper) element?
Thanks for help!

Answer 1

You can use display: grid on the Paper element, like so:
<Paper
sx={{
display: 'grid',
grid: 'auto / 25% 75%',
height: 50,
'& > div': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
},
}}
>
<Box>1</Box>
<Box>Name</Box>
</Paper>
Alternatively, you can do it with flex: 1 and flex: 3, but I think the grid method is easier to set up, since all the logic is in one line.