具有顶部栏，侧边栏和重复内容的CSS网格

Question

我在使用CSS网格功能创建以下布局时非常困难，并且不确定是否可行：

我可以将顶部和右侧的条形图放在表格的表格外，但是由于网格重复部分中的列是固定宽度的，因此我没有找到不在它们和表格之间留出空间的方法。边栏，而不会使其伸展。

我尝试了很多不同的方法，但没有一个起作用。我认为解决方案看起来像这样：

.my_grid {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 300px);
}

.grid_top_bar {
    grid-row-start: 1;
    grid-row-end: 1;
    grid-column-start: 1;
    grid-column-end: -1;
}

.grid_right_side_bar {
    grid-row-start: 2;
    grid-row-end: -1;
    grid-column-start: -1;
    grid-column-end: -1;
}

.grid_item {
}

<div class="my_grid">
    <div class="grid_top_bar">...</div>
    <div class="grid_right_side_bar">...</div>
    
    <!-- repeating items -->
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    <div class="grid_item">...</div>
    ...
</div>

...但是当然不起作用。知道是否/如何做到吗？

Answer 1

如果网格由4列组成，则顶部栏不是问题，右侧栏可能需要更新跨度值或足够大以覆盖您可能拥有的可能行数：