css - CSS-Grid 列の文字数の応答性

Question

グリッド レイアウトを使用して Web サイトを作り直しています。一部のページにはテキスト要素用のmainとボックスがあり、他のページには主な焦点がランオン テキストの場合にボックスがあります (利用規約などを考えてください)。文字幅に関するベスト プラクティスに従いたいと思います。アイデアは、ページが大きい画面では、全体的な結果がページと比較してより広いページを提供するということです。これまでのところ、2 つのラッパー (以下の CSS を参照) を使用して静的にこれを行っています。asidefull-widthmainasidefull-width

これは一般的に機能しますが、マージン、画像と引用ブロックの処理に伴うパディングにより、さらに複雑になります。セットアップmainで作業する場合、まだ理想的ではありません。asideこれを正確に計算するためにJavaを使用することを検討していますが、これをスムーズに動作させ、不格好にしないために利用できるCSSグリッドまたはその他の設定をまだ認識していない可能性がありますか? それとも、私は間違ったツリーを吠えていて、このアプローチで物事を過度に複雑にしていますか (結局のところ、私はまだ学んでいます)?

#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;
       (…)
   }

ポインタや提案をお寄せいただきありがとうございます。