title: How to make a Material UI grid element sticky?
body: <p>I am creating the front-end of for shopping cart. I have divided the container into two columns (using Grid container and Grid item) and inside each column, I have inserted some components. The left side contains components for each item and the left side contains only one component that shows the Order Summary. This picture illustrates what I am saying:</p>
  <p><a href="https://i.stack.imgur.com/HV1wX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HV1wX.png" alt="current view of the shopping cart on the desktop" /></a></p>
  <p>My question is how to make this left side (Order Summary) sticky at the top of the page when a user scrolls. I tried a couple of things with <code>z-index</code> and costume CSS-styling (<code>position: fixed</code> and <code>position: sticky</code>) but they break the Grid Structure that the Material UI offers. Also considering that the view is responsive it would be great that for mobile screens the Order Summary component stays at the end of the page where it is now:</p>
  <p><a href="https://i.stack.imgur.com/l53TL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/l53TL.png" alt="current view of the shopping cart on the mobile" /></a></p>
  <p>I could achieve to stick the component on top on desktop but then when I added custom styling the component stuck in the top in the mobile view and looks terrible. Is there any practical way to achieve this that I may have not noticed?</p>
  <p>Here is the Sandbox of the project: <a href="https://codesandbox.io/s/charming-cherry-eh27f" rel="noreferrer">https://codesandbox.io/s/charming-cherry-eh27f</a></p>
  <p>I hope that this way of dividing the page into columns would be helpful for somebody because I struggled a bit to find something similar online and thought of this way myself this morning. At the same time, I would appreciate any feedback and help for this feature I am trying to implement.</p>
  <h2><strong>UPDATE</strong></h2>
  <p>The solution provided by MaCadiz below works totally fine. I just wanted to say that feel free to create any pull requests if you want to add more features to this project. Here is the Github repo link: <a href="https://github.com/kleviss/shopping-cart-frontend-react-material" rel="noreferrer">https://github.com/kleviss/shopping-cart-frontend-react-material</a></p>