css Question posted in
Some basic documentation can be found here.

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

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>
  );
}
Tags:

2

Answers


  1. 0

    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!!

    Login or Signup to reply.
  2. 0 
    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search