Html 带有顶栏、侧栏和重复内容的CSS网格

我很难使用CSS网格功能创建以下布局，我甚至不确定这是否可行：

我可能会将顶部和右侧栏放在表格中的网格外，但由于网格重复部分中的列是固定宽度的，因此我没有找到一种方法在它们和侧栏之间留出空间而不让它们拉伸

我尝试了很多不同的方法，但没有一种有效。我认为解决方案应该是这样的：

.my\u网格{
显示：网格；
证明内容：中心；
网格模板列：重复（自动拟合，300px）；
}
.grid_顶部_条{
网格行开始：1；
网格行端：1；
网格列开始：1；
网格柱端：-1；
}
.格栅\u右侧\u侧杆{
网格行开始：2；
网格行结束：-1；
网格列开始：-1；
网格柱端：-1；
}
.grid_项目{
}

...
...
...
...
...
...

对于可变数量的列，为了避免空白，并具有响应性，您可以使用

• 宽度：最大内容量

• 使用特定标记时的子网格
• 一个连贯的标记（

  标题

  ，

  旁白

  ，

  主

  ），而不是中性的div

除了父窗口上的

width:max content

之外，您必须通过

calc（）

将

min width

设置为

main

，以避免空白，并允许根据窗口的宽度换行，而不是单列：

.grid{
显示：网格；
网格间距：0.5em；
}
#我的网格{
网格模板列：1fr 300px；
网格模板行：自动1fr；
网格自动流动：稠密；
宽度：最大含量；
保证金：自动；
}
主要{
网格模板列：重复（自动拟合，300px）；
最小宽度：计算（（100vw-400px）/1.35）；/*使其小于窗口的平均值400px fom，并将间隙移到起始宽度，然后除以（1.x）或乘以（0.x）进行调整*/
}
标题{
网格柱：1/3；
}
旁白{
网格柱：2；
}
.grid>：不是（.grid）{
边框：实心rgb（0、112、202）；
填充：0.5em；
背景：线性渐变（40度，rgb（9164233），透明，rgb（9164233），rgb（9164233），透明），线性渐变（-40度，rgb（9164233），透明，rgb（9164233），rgb（9164233），透明）rgb（144215245）；
背景尺寸：8px 15px，6px 12px
}

在整页模式下播放我，调整窗口宽度以检查我的行为
...
...
...
...
...
...
...
...
...
...
...
...
...

它是4col x Xrows还是Xcol x Xrows网格？您不需要将顶部和侧边栏放到网格中。您可以将重复部分设置为网格。使用Html/Css作为您的优势，而不是相反。Merlon，正如我提到的，我无法将侧边栏放在网格之外，而不在它们之间留出空间。也许我理解不正确，但是如果使用repeat，并且列的宽度是固定的，那么它将尽可能多地使用空间，而剩下的部分则是空的。我可以证明内容是正确的，但是我不能将整个内容完美地放在页面的中心…非常令人印象深刻，谢谢！另一个对我有效的方法是将顶部栏、侧栏和网格放在一个表中，并使用JS将网格的宽度设置为页面减去侧栏后所能容纳的列数。我希望你能在CSS中使用模或地板，否则我就不需要JS了。