I want to make the left sidebar about 25% of the total page width. The remaining 75%, I'll like to split evenly between the right sidebar and the main area.
It's just a matter of redefining the .site-grid, to
.site-grid {
grid-template-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 20rem) repeat(2, minmax(0, 15rem)) minmax(0, 30rem) [main-end] minmax(0, 1fr) [full-end];
This makes the page just a tad wider; in the original css, the total max-width is 79.5rem, in this case I made it 80rem, for no other reason than that it makes the maths much simpler.