Css - MUI Grid layout with info on the left and an image just to the right

ArthurJ
April 5, 2024
171 views
0 votes
2 Answers

Given the following React MUI V5 sample code, I am setting up a profile page where I have the details of a person to the left of the page that is represented with a label/value down the lefthand side of the page.

What I am unsure how to do, is place that "IMAGE" entry (please assume that this is a profile image of size (width: 300px and height: 300px) to the right of the values, that is alongside the label/values rows, but not right-most, just nicely positioned to the right of the info.

At the same time, I do not want any row info on the left to have any gaps inorder to accomodate the image, just to the right.

Any guidance would be great.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function NestedGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={1}>
        <Grid item xs={2}>
          <Box>Username:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Qwerty</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* First Name */}
        <Grid item xs={2}>
          <Box>First Name:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Bob</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Surname */}
        <Grid item xs={2}>
          <Box>Surname:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Hope</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* DOB */}
        <Grid item xs={2}>
          <Box>DOB:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>01/01/2022</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Occupation */}
        <Grid item xs={2}>
          <Box>Occupation:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>IT</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Status */}
        <Grid item xs={2}>
          <Box>Status:</Box>
        </Grid>
        <Grid item xs={6}>
          <Box>Married</Box>
        </Grid>
        <Grid item xs={4}></Grid>

        {/* Image */}
        <Grid item xs={2}></Grid>
        <Grid
          item
          xs={6}
          style={{ display: 'inline-flex', alignItems: 'center' }}
        >
          <Box>IMAGE</Box>
        </Grid>
        <Grid item xs={4}></Grid>
      </Grid>
    </Box>
  );
}

Answers

You can try below code to achieve this:

export default function NestedGrid() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={1}>
        <Grid item xs={12} sm={6}>
          <Item>Username: Qwerty</Item>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Item style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>IMAGE</Item>
        </Grid>

        {/* First Name */}
        <Grid item xs={12} sm={6}>
          <Item>First Name: Bob</Item>
        </Grid>

        {/* Surname */}
        <Grid item xs={12} sm={6}>
          <Item>Surname: Hope</Item>
        </Grid>

        {/* DOB */}
        <Grid item xs={12} sm={6}>
          <Item>DOB: 01/01/2022</Item>
        </Grid>

        {/* Occupation */}
        <Grid item xs={12} sm={6}>
          <Item>Occupation: IT</Item>
        </Grid>

        {/* Status */}
        <Grid item xs={12} sm={6}>
          <Item>Status: Married</Item>
        </Grid>
      </Grid>
    </Box>
  );

If this will not perfectly works then you can adjust based on your requirements.

Hope it will work for you!!

import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Logo from "../logo.svg";

export default function NestedGrid() {
  return (
    <Box display="flex">
      <Box>
        <Grid container spacing={1}>
          <Grid item xs={2}>
            <Box>Username:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Qwerty</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* First Name */}
          <Grid item xs={2}>
            <Box>First Name:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Bob</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Surname */}
          <Grid item xs={2}>
            <Box>Surname:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Hope</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* DOB */}
          <Grid item xs={2}>
            <Box>DOB:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>01/01/2022</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Occupation */}
          <Grid item xs={2}>
            <Box>Occupation:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>IT</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Status */}
          <Grid item xs={2}>
            <Box>Status:</Box>
          </Grid>
          <Grid item xs={6}>
            <Box>Married</Box>
          </Grid>
          <Grid item xs={4}></Grid>

          {/* Image */}
          <Grid item xs={2}></Grid>
          <Grid
            item
            xs={6}
            style={{ display: "inline-flex", alignItems: "center" }}
          ></Grid>
          <Grid item xs={4}></Grid>
        </Grid>
      </Box>
      <Box component="img" src={Logo} width={300} height={300} />
    </Box>
  );
}

Wrapped the entire Box by another Box and use flex layout system. Left side is information and right side is Image.
The above code will work fine.
Hope you like it.

Please signup or login to give your own answer.

Click here to cancel reply.

Css – MUI Grid layout with info on the left and an image just to the right

Answers