Blazor与css布局网格

Question

我第一次尝试web开发和blazor。我使用的是css布局样式display:grid

我正在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;

点击此处了解更多：链接