Styling Grid to have more elements than text

Issue

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!

Solution

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.

Answered By - Summer