已经为我提供了以下布局（请参阅链接），但我不确定100％应该采用哪种方法进行布局。我已经花了6个小时来使用grid和flexbox，但是我一直在想“这应该是grid而不是flexbox，而这应该是flexbox而不是grid”，我一直在努力。有点混乱，所以我正在寻找一些建议。
在屏幕截图中，需要单击以查看。用户界面的灰色部分始终存在，主导航栏可以展开并将其右侧的内容推入上方。如图所示，它将是一个基于图标的菜单，展开后将显示图标标签。
出于这个原因，徽标和主导航在较高级别上是一列，而右侧的所有内容在另一列。因此，我在此显示网格。第一列内的“行”是父元素在其中显示的两个flex项目元素：flex，flex-direction：列。第一项仅具有最小高度，而“第二项”上具有挠度1，以填充容器的其余高度，该高度等于视口高度。然后，创建行的外观。我在第二列中遵循类似的模式，但是第二个“行”是它自身所包含的“行”（如橙色，蓝色部分）的伸缩包装。
根据页面及其所发生的情况，始终不会显示橙色和蓝色的条形，但是ui必须无缝地适应它们。
我在内部两列部分（绿色/粉红色区域）重复了此模式，其中外部容器是仅两列（一行）的显示网格。然后将显示里面的所有内容：flex，flex-direction：列。
对我来说，一切似乎都是一维的，因为当ui分解时，我实际上只在每一列中有一个实际行。定义一个只有一个实际行的网格对我来说似乎很奇怪，因此我认为它应该都只是弹性框，因为据我所知，我实际上并没有任何二维布局。真的重要吗？我是一位经验丰富的CSS开发人员，但没有网格技术，所以现在我的脑海有些困惑。
不幸的是，所有这些都必须与IE10一起使用并且可以访问，因此我必须在所有行查找位中设置最小高度（如果其中包含文本），因为用户可能会增加字体大小。
默认情况下，与主导航一样，绿色侧面板是隐藏的，但是单击按钮会使其滑入以查看和微调粉红色列。
如果您看到此用户界面，应如何细分？任何建议或见解将非常欢迎。谢谢。
