Tips for adjusting the width of items within the Box element in Material UI React

I am utilizing React Material UI along with the Box component to style my form. In this scenario, I have 4 items in each row except for the last row where I need to display only 3 items with the last item filling the entire row by merging two elements together. How can I achieve this when the Box component divides all my rows into 4 columns?

Here is my code:

<Box
    sx={{
       display: 'grid',
       columnGap: 2,
       rowGap: 3,
       gridTemplateColumns: {xs: 'repeat(7, 1fr)',
       sm: 'repeat(4, 1fr)'},
         }}
  >
First row with 4 columns:

    <TextField ....>
    <TextField ....>
    <TextField ....>
    <TextField ....>

Second row with 3 columns:

    <TextField ....>
    <TextField ....>
    //This column should span across two columns.
    <TextField ....>

</Box>
cssreactjsmaterial-uimaterial-design

Answer №1

Give this grid design a try:

import * as React from "react";
import { Box, TextField } from "@mui/material";

export default function CustomGrid() {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateAreas: "'a1 a2 a3 a4' 'b1 b2 c c'"
      }}
    >
      {/* First row with 4 columns: */}
      <TextField style={{ gridArea: "a1" }} />
      <TextField style={{ gridArea: "a2" }} />
      <TextField style={{ gridArea: "a3" }} />
      <TextField style={{ gridArea: "a4" }} />
      {/* Second row with 3 columns: */}
      <TextField style={{ gridArea: "b1" }} />
      <TextField style={{ gridArea: "b2" }} />
      {/* The following column should span two columns. */}
      <TextField style={{ gridArea: "c" }} />
    </Box>
  );
}

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

Searching for a document using the $eq operator in MongoDB within the context of Next.js - what is

In my Next.js code, I am fetching a document from MongoDB using a unique slug. Here is the code snippet: export async function getStaticProps(context) { const postSlug = context.params.postPage; const { db } = await connectToDatabase(); const posts ...

javascriptnode.jsreactjsmongodbnext.js

What is the best way to monitor and record the height of a div element in a React application?

Exploring the Height of a Div I am interested in monitoring the height of a div element so that I can dynamically adjust distances based on varying screen widths. The animation should respond to changes in screen width, such as when text stacks and the he ...

javascripthtmlcssreactjs

What is the best way to position two out of the three link tags to the right side?

This is the code snippet I am currently working with: <table> <tr> <td>&nbsp;</td> <td> <a id="btnAutoSuggest">Suggest Title</a> <a id="btnOK">OK</a> <a id ...

htmlcss

Tips for troubleshooting issues with create-react-app

npm ERR! errno ERR_SOCKET_TIMEOUT npm ERR! network Invalid response body received when attempting to download https://registry.npmjs.org/@typescript-eslint%2fscope-manager: Socket timeout npm ERR! network This issue is likely due to a pr ...

node.jsreactjsnpm

Can you show me how to achieve a smooth background color transition for a div that takes 2 seconds to complete when it is inserted into the DOM?

On my webpage, I have a list of items that are constantly being updated via a WebSocket connection to the backend. Each time a new item is added to the list, I would like it to be displayed with a background color transition lasting only a brief moment. ...

htmlcss

The loading indicator fails to show up when users navigate between pages that have already been loaded in NextJS and ReactJS

What do I need: I am seeking a way to show a loading indicator whenever a user switches between pages on my website. After discovering an effective example at https://github.com/zeit/next.js/tree/canary/examples/with-loading, I implemented a similar appro ...

javascriptreactjsnext.js

JQuery Scroll Spy Implementation

I have structured the page with a header at the top and 3 columns below. The left column contains a menu, the middle column is a text container, and the right column is another section. As the page scrolls up, the menu becomes fixed in position which func ...

jqueryhtmlcss

react native reanimated animation only works on initial load

Utilizing reanimated, I have developed a customized alert within a modal. It functions properly but the animation only occurs once initially; afterward, when the modal is visible and its contents are updated, the animation fails to function. Below is my c ...

reactjsreact-nativereact-native-reanimated

Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of th ...

javascripthtmlcss

Can <option> tags be arranged side by side using CSS?

Here is a form I am working with: <form action="file.php" method="GET"> <input type="hidden" name="page"> <select> <option>Text 1</option> <option>Text 2</option> <option>Text 3 ...

htmlcsshtml-select

Modify the state from a listener that is enclosed in the useEffect function

Within my hook called useQueryEvents, I have a setup that involves fetching all past transactions for a user and listening to the network for incoming/outgoing transactions. These transactions are then passed into a function called addActionToActivity, whi ...

javascriptreactjsreact-nativelistener

Display or conceal a field based on the content of another field using jQuery

Is there a way to hide or show a field on my website based on the value in the shopping cart? I've created a function for this, but I'm struggling with the condition. Can you help me figure out how to write it correctly? <script> $(docume ...

htmljquerycss

Move to the right with floating using Angular Material

I am dealing with a situation in which I have an md-card-content element. Inside it, there is a div and another md-card-content element. The challenge I am facing is that I want to move the contents of the inner md-card-content to the right. I tried usin ...

htmlcssuser-interfaceangular-material

Validation is not being applied to the radio button

Link: Issue with Form I've encountered a problem with my script that is meant to validate and submit a form, similar to this working example: Form in Working Order Unfortunately, the script is not functioning as intended on the first link. The Java ...

jqueryhtmlcss

Retrieve a dynamic hex color variable for Tailwind CSS using Next.js

I need to dynamically change the colors based on a hex code retrieved from a database. In my variables.js file: const primaryColor = "#000000"; const secondaryColor = "#ff0000"; const notCheckedColor = "#9CA3AF"; export { primaryColor, secondaryColor, no ...

reactjsnext.jstailwind-cssnext.js13

Enhance Your Website with HTML5 Video Transition Effects

Is it possible to recreate video transition effects using HTML5 similar to the ones shown in this example: Can this be achieved across all major browsers, including Safari, Firefox, Chrome, and IE9? ...

jquerycsshtmleffectstransition

Having trouble accessing undefined properties in ReactJs? Specifically, encountering issues when trying to read the property "name"?

I am facing an issue with using the data in my console even though I can log it. The structure of my data object is as follows: {_id: '616bf82d16a2951e53f10da4', name: 'abd', email: '[email protected]', phone: '123456789 ...

javascriptreactjs

Exploring the ins and outs of flexbox and utilizing overflow:auto

In my current situation, I have successfully resolved all cases but am now seeking assistance in debugging my mental model. Specifically, I am focusing solely on Chrome for the sake of simplicity. Within my nested "holy grail-ish" flexbox layouts, I have ...

cssflexbox

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

javascripthtmlcssevents

There is an overwhelming amount of dependencies in the Npm package

Recently I delved into the world of npm and found myself facing a conundrum regarding dependencies. While following along with a React tutorial, I was instructed to execute the command: npm install -g create-react-app In addition to that, for a personal ...

node.jsreactjsnpmdependenciesnpm-install