Blazor Server端Virtualize组件自动生成多余div破坏网格布局

问题根源 #

Blazor的Virtualize组件默认会渲染一个外层<div>作为容器，这个容器会成为Grid布局的直接子元素。原本你的Grid应该直接包含6个网格项div，现在变成Grid只包含Virtualize生成的那个div，所有网格项都嵌套在这个div里，自然没法按3列规则排列。

快速解决 #

给Virtualize组件加上style="display: contents"样式，这个CSS属性会让Virtualize生成的外层div不参与布局，它的子元素会直接作为Grid的子元素生效，完美适配原有布局：

@page "/test"

<div class="Grid">
    @foreach(var item in items)
    {
        <div>@item</div>   
    }
</div>

<div class="Grid">
    <!-- 添加display: contents样式 -->
    <Virtualize Items="@items" Context="item" style="display: contents">
        <div>@item</div>
    </Virtualize>
</div>

<style>
    .Grid {
        display:grid;
        grid-template-columns:min-content min-content min-content;
        grid-column-gap:10px;
    }
</style>

@code {
    private string[] items = new string[] { "A1", "B1", "C1", "A2", "B2", "C2" };
}

额外说明 #

• display: contents是现代浏览器都支持的CSS属性，作用是让元素本身从布局结构中“消失”，子元素直接继承父元素的布局上下文。
• 如果你需要指定Virtualize的容器标签，也可以用ContainerElement属性（比如<Virtualize ContainerElement="span" ...>），但配合display: contents是最简洁的方案。

内容的提问来源于stack exchange，提问作者Matias Masso