Я впервые пробую веб-разработку и блейзор. Я использую 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;
}
, но моя правая граница не совпадает с сеткой, а с самим окном , Изображение того, что происходит
Кто-нибудь знает, что мне не хватает?