Arrange elements with Material-UI's Grid system

Question

Arrange elements with Material-UI's Grid system

Check out my codesandbox example (here) showcasing how I have set up my current app with Material-UI grid. I have 5 components that need to be positioned in a specific way for different screen sizes.

For screens sized lg and above, I want the components to look like this: https://i.sstatic.net/5fCKe.png

On screens sized md and below, I'd like the components to appear as shown here: https://i.sstatic.net/1U9SS.png

I've tried various approaches but haven't quite achieved the desired layout yet. Specifically, I'm struggling to place component 5 on the same row for larger screens and on the next row for smaller screens.

Any help or suggestions you can provide would be greatly appreciated. Thank you!

css reactjs material-ui

Answer 1

Answer №1

If you're looking to implement responsive design using Material UI, consider utilizing the breakpoints hook provided in their documentation material-ui-breakpoints

To see an example in action, check out this demo app I created specifically tailored to demonstrate how the breakpoints work for various screen sizes link-to-demo

Below is a snippet of sample code that showcases how to structure layouts based on different screen widths:

import React from "react";
import withWidth, { isWidthDown, isWidthUp } from "@material-ui/core/withWidth";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  // Define styles for layout items here
}));

const App = (props) => {
  const classes = useStyles();

  if (isWidthUp("lg", props.width)) {
    return layout1(classes);
  } else if (isWidthDown("md", props.width)) {
    return layout2(classes);
  }

  return <React.Fragment />;
};

// Function defining layout for larger screens
const layout1 = (classes) => {
  return (
    <Grid container>
      {/* Insert Grid items here based on specified breakpoints */}
    </Grid>
  );
};

// Function defining layout for smaller screens
const layout2 = (classes) => {
  return (
    <Grid container>
      {/* Insert Grid items here based on specified breakpoints */}
    </Grid>
  );
};

export default withWidth()(App);

Answer 2

If you're looking to implement responsive design using Material UI, consider utilizing the breakpoints hook provided in their documentation material-ui-breakpoints

To see an example in action, check out this demo app I created specifically tailored to demonstrate how the breakpoints work for various screen sizes link-to-demo

Below is a snippet of sample code that showcases how to structure layouts based on different screen widths:

import React from "react";
import withWidth, { isWidthDown, isWidthUp } from "@material-ui/core/withWidth";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  // Define styles for layout items here
}));

const App = (props) => {
  const classes = useStyles();

  if (isWidthUp("lg", props.width)) {
    return layout1(classes);
  } else if (isWidthDown("md", props.width)) {
    return layout2(classes);
  }

  return <React.Fragment />;
};

// Function defining layout for larger screens
const layout1 = (classes) => {
  return (
    <Grid container>
      {/* Insert Grid items here based on specified breakpoints */}
    </Grid>
  );
};

// Function defining layout for smaller screens
const layout2 = (classes) => {
  return (
    <Grid container>
      {/* Insert Grid items here based on specified breakpoints */}
    </Grid>
  );
};

export default withWidth()(App);

Arrange elements with Material-UI's Grid system

Answer №1

Similar questions

Alpha Screen and Shading Filter

ReactJS application encounters difficulty retrieving information from CSV file

Create a fresh instance from an existing object in JavaScript

Tips for utilizing two renderCell functions in a datagrid from Material UI without encountering duplication or repetition

Is it feasible to view images in various formats?

The issue with updating the Boolean value in the MERN stack is attributed to the absence of quotation marks in the code

Error message authentication error: "Access token validation failed due to invalid audience"

Tweaking the placement of the dropdown menu in the subnavigation area

Increase the size of a button using CSS styling

What steps should I take to ensure that the content within a div also goes full screen when I expand the div?

Bone structure template - optimizing list spacing with CSS

Creating personalized components - a step-by-step guide

What is the reason border-box does not function properly on inline-block elements?

Next.js - Uncaught ReferenceError: Cannot access 'window' before initialization

The nested table is overflowing beyond the boundaries of its outer parent table

Minor Chrome compatibility problems with CSS alignment

Is there a way to manually refresh the cache for tagged data access in Next app router without utilizing the fetch method?

Synchronization of data on mobile devices without the need

Combining Three.js with iFrame for a mix of WebGL and CSS3D

Having trouble with the ::after element in my React component for my latest React 3D portfolio project