Use CSS Grid to Make a Fixed Sidebar with Scrollable Main Body

Forget `position: absolute` and `position: fixed`, reach for CSS Grid instead.

Introduction

Last year I authored a web development course on modernizing enterprise React applications. It was a big undertaking, but I’m proud to have put out a comprehensive guide to show developers just what it takes to build and maintain a large scale, long-running React application: tooling, testing, refactoring, design systems, and more.

For this course, I built a React project similar to what you might find when joining an existing enterprise company: it’s an internal application used by product managers to manage assortments of tools and other home improvement items and select which ones should be shipped to stores to be sold. I named it “Hardware Handler”.

The project started out using an outdated version of React, having no tooling for easier setup, no automated tests, no React Hooks, no state management, no component library, and so on and so forth. As the course progressed through each module, I focused one aspect of the project and showed how to update the project to today’s high quality software standards: adding React Testing Library and Jest for unit tests or refactoring class-based React components to use…