画面の各コンポーネントの比率の指定方法

実現したいこと

画面の各要素を画面幅に対して同じような比で表示されるように、widthやheightを固定の数値ではなくて、vwや%で表示させたい

発生している問題・分からないこと

どのような方法でそれを実現するのが良いのか分からない。vw, %, flexbox, gridsystemなどあると思うが、どの方法にどのようなメリットデメリットがあってこの場合はどれでやるのが良いのかが分からない

以下の画像のようにchatGPTみたいに画面全体は100vhで表示させたいです。そして、ヘッダー、サイドバー（右左）、メインの四つのコンポーネントがありますが、それぞれ画像のような割合イメージで表示させたいです。どの方法でこれを実現させるのが良いでしょうか？

該当のソースコード

どこかの部分のコードというよりも全体の話や考え方の部分が知りたいのでコードを載せていないです。

試したこと・調べたこと

上記の詳細・結果

他のサイトはvw, vhを使っていろいろ作ってみたが、改めてどのプラクティスが良いのかを知りたいです

補足

以下のサイトです。
https://enterprizegai.netlify.app/