带有css布局网格的Blazor

Question

我第一次尝试了网页开发和blazor。我使用css布局样式显示:网格

我在Blazor中做了一个组件，它是可重用的，我想在它周围放置一个边框，所以我在我的css类下放置了一个边框，这是我的最高级别，与我的网格布局相同。

.recipe-preview {
display: grid;
grid-template-columns: 9rem 3rem 24rem;
grid-template-rows: 9rem 9rem;
grid-template-areas: "image details details" "ingredients ingredients method";
overflow: hidden;
position: relative;
border: 3px solid black;
}

但我的右手边框不是与网格对齐，而是与窗口本身对齐。正在发生的事情的图像

有人知道我错过了什么吗？

Answer 1

使用

display: inline-grid;

在这里了解更多：链接