Responsivity with charactercounts in CSS-Grid columns

Question

I am reworking a website using a Grid-layout. Some pages have a main and an aside box for text elements, others have a full-width box when the main focus is run-on text (think terms & conditions and similar). I would like to follow best practices as to character width. The idea is that on bigger screens the main-aside pages, the overall result would offer a wider page, compared to a full-width page. So far I am doing this rather statically by using two wrappers (see below CSS).

This works in general, but margins, padding along with image and quote-block handling adds further complexity, it's not quite ideal yet when working with the main-aside setup. I've been considering using Java to calculate this accurately, but maybe there are some CSS-grid or other settings I am yet unaware of that I could utilize to make this work smoothly and not clunky? Or am I barking up the wrong tree, and overcomplicating things with this approach (I'm still learning after all)?

#wrapper { /* holding main & aside text */
   max-width: 130ch;
   width: 100%;
   margin: auto;
   (…)
 }

#wrapper-full { /*holding full-width text */
   max-width: 90ch;
   width: 100%;
   margin: auto;
   (…)
 }

#wrapper, #wrapper-full  {
        display:grid;
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: minmax(100px, auto);
        grid-column-gap: 5ch;
        grid-template-areas: 
            "hd hd hd hd hd hd hd had" /* hd = header */
            "le le le le ri ri ri ri" /*le = left; ri = right */
            "ft ft ft ft ft ft ft ft"; /* ft= footer */
    }

aside {
    grid-area: ri; /* handle grid layout for medium/large devices */
    margin-right: 5ch;
    (…)
}

main {
    grid-area: le; /* handle grid layout for medium/large devices */
    margin-left: 5ch;
    (…)
}

.full_width {
       grid-column-start: 1;
       grid-column-end: eight;
       (…)
   }

Thanks in advance for any pointers and suggestions.