Почему у меня есть переполнение по оси X в следующем фрагменте?
Переполнение генерируется, когда я применяю grid-gap: 10px
к своему контейнеру сетки .body
.
div:not(.header):not(.body):not(.row) {
border: 1px solid grey;
}
.header {
margin-top: 20px;
display: grid;
grid-gap: 10px;
grid-template-areas: "header-left header-right-up" "header-left header-right-down";
grid-template-rows: 40px 40px;
grid-template-columns: minmax(50px, 200px) auto;
}
.header-left {
grid-area: header-left;
}
.header-right-up {
grid-area: header-right-up;
}
.header-right-down {
grid-area: header-right-down;
}
.body {
margin-top: 20px;
display: grid;
grid-template-columns: 25% 50% 25%;
grid-auto-rows: 80px;
grid-gap: 10px;
}
.row-left {
}
.row-center {
}
.row-right {
}
<div class="header">
<div class="header-left">image</div>
<div class="header-right-up">content</div>
<div class="header-right-down">long content</div>
</div>
<div class="body">
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
<div class="row-left"></div>
<div class="row-center"></div>
<div class="row-right"></div>
</div>
</div>