In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>:
Here's how it looks in JSX (React):
<div className="container">
<DataGrid
rows={someRows}
columns={someColumns}
/>
<div className="somethingElse">
...
</div>
</div>
The CSS for the layout is as follows:
.container {
display: grid;
width: 100%;
grid-template-columns: 3fr 1fr;
}
My expectation is:
- The
<DataGrid />and
should be next to each other, with the<div className="somethingElse"><DataGrid />taking up 3/4 of the total window width, and
taking up 1/4.<div className="somethingElse"> - When the user resizes the window, the 3/4 and 1/4 split should remain constant, but both elements should expand or shrink accordingly.
However, in reality: The size of the <DataGrid /> does not change when resizing the window.
I'm wondering if there are any specific styling adjustments needed for the correct behavior of the grid.