Creating a grid with the box component and sx prop

Question

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?

Answer 1

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>