Well, this week was an exercise in patience learning about how to better layout my pages using MUI. I’m relatively new to the concepts of flexboxes, grids, containers etc for more advanced forms of CSS styling, so initially I thought I could get away with just putting my components into a grid and having it space things out properly. I was wrong.

In the layouts of my initial pages, while I was able to learn and apply a lot of new stuff in building them, the design ultimately sucked. The pages were boring, dated, and barely a step up from a site right out of the early 2000s. I wanted to adopt a more modern paper-card-like aesthetic to spruce them up. This led to an hours long session of tinkering with different combinations of grids/boxes/containers/card components in the MUI react framework. My initial approach was to designate sections of the pages with a parent grid, then make a card in the center element of that grid that houses another grid/stack to arrange my components within the card. In theory this is technically correct, but in practice it turned out to be a mess.    

What I wasn’t understanding is that the size of the parent component dictates how you can size and position your child components, and additionally if you want to have more control over a child element, utilizing one of the container components in MUI and creating a custom theme for it is a must (note that one of the containers is actually called container). I was able to adapt my initial idea of laying out the overall page with a grid (parent component) and then placing my cards inside that with another nested grid to instead laying out the initial page in a custom box and placing a card with a grid inside it inside the parent box. This allowed for the responsive card like design on the create and edit page to look appear how they do below. For the dashboard page, I was able to keep the overall parent grid layout with a nested stack inside (for this page really just added custom themes to make it cleaner). Here are the final products.