Is there a way to create a layout with a row containing two columns and another row with just one column using MUI Grid?

Is it possible to achieve the design displayed in the image using MUI components?

I am facing an issue where I am unable to properly insert a third Button into the MUI grid with the same width as the other two buttons. Any suggestions on how to solve this problem?

<Container>
  <Grid
    container
    direction="row"
    justifyContent="flex-start"
    alignItems="center"
    spacing={4}
  >
    <Grid item>
      <Button variant="outlined" onClick={() => {}}>
        Button 1
      </Button>
    </Grid>

    <Grid item>
      <Button color="secondary" variant="contained" onClick={() => {}}>
        Button 2
      </Button>
    </Grid>
  </Grid>
</Container>

Answer №1

Make sure to take a look at this helpful guide: https://mui.com/material-ui/react-grid/

This is how your code should appear:

<Grid container spacing={2}>
  <Grid item xs={6}>
    BUTTON
  </Grid>
  <Grid item xs={6}>
    BUTTON
  </Grid>
  <Grid item xs={12}>
    BUTTON
  </Grid>
</Grid>

The xs={value} indicates the size of each grid item. In your situation, you'll need two columns of equal width stacked on top of another column that spans the combined width of the previous two.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for quietly printing a PDF document in reactjs?

const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...

What could be preventing this src tag from loading the image?

Here is the file structure of my react project Within navbar.js, I am encountering an issue where the brand image fails to load from the Assets/images directory. import '../../Assets/Css/Navbar.css'; import image from '../../Assets/Images/a ...

Add Text to Bootstrap Modal Window

The bootstrap modal body is not containing all of my content and some of it is overflowing. <div class="modal fade" tabindex="-1" role="dialog" id= "blockModel"> <div class="modal-dialog"> <div class="modal-content"> < ...

The parsing of the React module in webpack failed due to an error with ReactDOM

Recently, I've been diving into the insights offered by the surviveJS ebook as I attempt to configure webpack for my ReactJS projects. However, when attempting to run my start script, a perplexing error arises: An error in ./app/index.js Module pa ...

What could be the reason behind the frequent occurrence of the "ECONNRESET" error in React?

While attempting to create a React app using 'npx create-react-app my-app', I encountered an npm ECONNRESET error. Being new to ReactJS, I am unsure of how to resolve this issue and would appreciate any assistance provided. I have decided to seek ...

What are the steps to incorporate Google reCAPTCHA in the Ant Design Form component?

I've been experimenting with incorporating react-recaptcha and antd. Here is the snippet of my code: import React from 'react'; import 'antd/dist/antd.css'; import Form from 'antd/lib/form'; import Input from 'antd ...

Troubleshooting typescript error in styled-components related to Material-UI component

When using typescript and trying to style Material UI components with styled-components, encountering a type error with StyledComponent displaying Type '{ children: string; }' is missing the following properties import React, { PureComponent } f ...

How to solve the issue "Error: Nextjs requires a column ID (or string accessor) in react-table"

() After attempting to follow the instructions in the react-table documentation regarding sub-components, I encountered the same error even when utilizing the basic table implementation. This is how my data.json file is structured: { "orderId&quo ...

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...

Fixing the CSS 404 error caused by using variables in Flask routes: A step-by-step guide

I have created a basic web application to showcase book reviews. Upon a successful search, users are provided with links to book titles - when a link is clicked, the goal is to pass the ISBN of the selected book to the url_for method and then present the c ...

Trouble sliding with Material UI Slider

I've encountered an issue with my Material UI slider - it doesn't slide when clicked and dragged. I followed one of the examples on the Material UI website (https://material-ui.com/components/slider/) and included an onChange function. The values ...

Tips for updating a React state while using the history API

In an effort to simplify and stay focused on the problem, I recently wrote a brief piece of code. Within this code, there is a component containing a Dialog that plays a role in a commercial process. This Dialog allows users to input information such as no ...

I can't figure out why I'm having trouble installing npm react-google-charts

When working on an existing React project and creating a new one with npm init, I encountered an error after running npm install react-google-charts. Why am I receiving the following error message (some lines have been edited out)? npm ERR! Linux 4.15.0-3 ...

Aligning table data elements within a division

Currently working on revamping a tech night website for my school. I made some changes to the navbar, switching it from the side to the top. However, I'm struggling to get the table data and menu to center properly within the div. If you'd like ...

Is there a way to handle specific email format designs with PHP?

When trying to send an email with specific shipping information and tracking numbers, the formatting appears strange. Here is the desired format: Dear xyz , Per your request, this email is to no ...

Sort slider items using Show/Hide feature in bxSlider

I am using a bxslider on my website with specific settings: $('#carousel').bxSlider({ slideWidth: 146, minSlides: 2, maxSlides: 6, speed:500, adaptiveHeight: true, moveSlides:3, infiniteLoop : false, hideContr ...

Sculpting the excess from a div-generated HTML button

I need help with adjusting the appearance of a link to make it look like a button. Currently, the button looks too "fat" because of the red background around the text. How can I reduce this effect? I've tried tweaking the width of the div, but that j ...

Using the max-width property with Semantic UI Dropdown in ReactJS

I'm struggling to determine how to adjust the max-width of the Dropdown element in ReactJS. I attempted the following: .Menu Dropdown { max-width: 5rem !important; } Unfortunately, this did not work as expected. The dropdowns are taking up too m ...

On screens with smaller dimensions, the divs intersect with each other

I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the ...

Adjust the text to align with the available space while maintaining the original motion effect

My Next.js project has the following structure: . ├── media │   └── img.jpg ├── package.json ├── package-lock.json ├── postcss.config.js ├── src │   ├── components │   │   └── AnimatedCharacte ...