3

In material UI v5 supposedly one can create almost anything with the sx prop, on the list is grid unfortunately I am unable to create what should be a simple grid. To illustrate here is what my grid would look like.

My unsuccessful attempts at using the Box component and sx prop look like this

What am I missing here, how can recreate what I have with the Grid component with the Box/sx combo?

Michael
  • 4,538
  • 5
  • 31
  • 58

1 Answers1

0

Is it that you want ? Live example sandbox ?

  <Box sx={{ placeContent: "center", display: "grid" }}>
      <Box sx={{ gridRow: "1", gridColumn: "div 1" }}>
        <TextField
          name="name"
          label="Name"
          variant="outlined"
          type="text"
          margin="dense"
        />
      </Box>
      <Box sx={{ gridRow: "2", gridColumn: "div 1" }}>
        <Autocomplete
          disablePortal
          id="combo-box-demo"
          options={top100Films}
          renderInput={(params) => <TextField {...params} label="Movie" />}
        />
      </Box>
    </Box>
Hakob Sargsyan
  • 1,294
  • 1
  • 9
  • 15
  • Well sort of, in this case you successfully centered the box elements but you have not determined how much of the grid they take up, I want them in my example to take up 4/12 of the grid width. – Michael May 16 '22 at 10:39
  • [Example with 4/12](https://codesandbox.io/s/gridtemplateareas-material-demo-forked-nlxttc?file=/demo.tsx:0-874) , is it helpful ? @Michael – Hakob Sargsyan May 16 '22 at 15:42