使用Rotativa转换Razor视图为PDF时显示效果与网站不一致的问题求助

大家好，我现在在用Rotativa把Razor视图转成PDF文档，但遇到了个棘手的问题——生成的PDF和网页上渲染的样式完全不一样，根本达不到预期的表格布局效果。

下面是我的Razor视图代码：

@model PieListViewModel

@{
    Layout = null;
}

<link href="@("https://" + Context.Request.Host.ToString() + "/css/site.css")" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>

@* http://localhost:port/StyleSheet.css *@

<div class="container">
    <div class="grid">
        <div class="Weight border-left border-bottom">
            <span class="margin-left">Id</span>
        </div>
        <div class="Weight border-left border-bottom">
            <span class="margin-left">Name</span>
        </div>
        <div class="Weight border-left border-bottom">
            <span class="margin-left">Price</span>
        </div>
        <div class="Weight border-left border-bottom">
            <span class="margin-left">Actions</span>
        </div>

        @foreach (var pie in Model.Pies)
        {
            <div class="Weight border-left border-bottom">
                <span class="margin-left">@pie.PieId</span>
            </div>
            <div class="Weight border-left border-bottom">
                <span class="margin-left">@pie.Name</span>
            </div>
            <div class="Weight border-left border-bottom">
                <span class="margin-left">@pie.Price</span>
            </div>
            <div class="border-bottom weight border-left" >
                <a asp-controller="Pie" asp-action="Details" asp-route-id="@pie.PieId" class="actions ">Details</a>
                <a asp-controller="Pie" asp-action="EditPie" asp-route-pieId="@pie.PieId" class="actions">Edit</a>
                <a class="actions">Delete</a>
            </div>
        }
    </div>
</div>

配套的CSS代码：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.border-bottom {
    border-bottom: solid 0.1rem rgb(142, 139, 139);
}

.container {
    width: auto;
    margin: 2rem 1rem;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    justify-items: center;
}

.Weight {
    font-weight: 80%;
}

.border-left {
    border-left: solid 0.1rem rgb(142, 139, 139);
    width:100%;
    text-align:center;
}

.margin-left {
    margin-left: 0.5rem;
}

.actions {
    display: inline-block;
    color: rgb(241, 160, 7);
    text-decoration: underline;
}

网页上能正常渲染出规整的表格布局，但生成的PDF完全走样，内容变成了：

111
1111
11111
111111
1111111
11111111
111111111
1111111111
11111111111

我希望PDF能和网页上的显示效果完全一致，有没有大佬能帮我排查下问题出在哪？

备注：内容来源于stack exchange，提问作者A_AhMaD