We can use a combination of `display: grid` and `position: sticky` in order to create sticky columns and rows.
This effect can be seen in most spreadsheet applications, when a row or column of data can be "pinned" in place. This allows a user to scan tabular data while holding the row or column in place as a reference. To understand how to achieve this, we will build sticky columns, then sticky rows, then put the two together into a full table.
To get started, let's declare some utility classes to create grid layouts
First we create a 1xN grid of cells and apply a sticky position to the cell (column) we wish to pin.
We can orient our grid along another dimension as well and apply a sticky positon relative to the vertical instead of horizontal.
Putting the above together, our strategy with a NxM grid is to render out the cells, then apply the correct sticky class to each cell, based on whether it falls within a sticky column or sticky row. We must also set the z index for these cells to ensure the pinned data is never covered.
For a great primer on css grid, checkout the guide from css-tricks