CSS网格计算的响应布局溢出固定宽度的父容器

Question

我有一个1x4up的网格布局，在我尝试将其包装在一个居中的容器div中之前，它效果很好。这是一个带有布局的笔。

https://codepen.io/kirkbross/pen/XWEBRWw

我尝试使用@media查询var--fw，首先将其设置为1320px，然后在<1320px，但所有其他计算的变量都不赞成这种方法。想法？

结果应该是以1320px父级为中心的网格布局，并在窗口达到1319px时开始相应收缩。

.wrapper {
width: 1320px;
margin: 0 auto;
max-width: 100%;
}
* {
margin: 0;
padding: 0;
}
.grid-container {
--fw: 100vw;
--w1: calc((var(--fw) - 40px + (var(--ratio) * 10px)) / 2);
/* the width of the big rectangle */
--ratio: calc(678 / 399);
--h1: calc(var(--w1) / var(--ratio));
/* the height of the big rectangle */
--h: calc((var(--h1) - 10px) / 2);
/* the height and width of the smaller rectangles */
--w: calc(var(--h) * var(--ratio));
display: inline-grid;
gap: 10px;
grid-template-areas: "A B C" "A D E";
grid-template-columns: var(--w1) var(--w) var(--w);
grid-template-rows: auto auto;
box-sizing: border-box;
border: solid 10px black;
background-color: black;
margin: 0 auto;
}
.grid-container>div {
height: var(--h);
width: var(--w);
}
img {
width: 100%;
height: 100%;
}
.grid-container> :nth-child(1) {
width: var(--w1);
height: var(--h1);
grid-area: A;
}
.grid-container> :nth-child(2) {
grid-area: B;
}
.grid-container> :nth-child(3) {
grid-area: C;
}
.grid-container> :nth-child(4) {
grid-area: D;
}
.grid-container> :nth-child(5) {
grid-area: E;
}

/* this 1320px wrapper div breaks layout until the window is shrunk to the wrapper width*/
<div class="wrapper">
<div class="grid-container">
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
</div>
</div>

Answer 1

我建议使用媒体查询的方法是正确的方法，以便修改.grid-container的--fw自定义属性以适应当前显示的情况：

@media screen and (min-width: 1320px) {
.grid-container {
--fw: 1320px;
}
}

.wrapper {
width: 1320px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid-container {
--fw: 100vw;
--w1: calc((var(--fw) - 40px + (var(--ratio) * 10px)) / 2);
/* the width of the big rectangle */
--ratio: calc(678 / 399);
--h1: calc(var(--w1) / var(--ratio));
/* the height of the big rectangle */
--h: calc((var(--h1) - 10px) / 2);
/* the height and width of the smaller rectangles */
--w: calc(var(--h) * var(--ratio));
display: inline-grid;
gap: 10px;
grid-template-areas: "A B C""A D E";
grid-template-columns: var(--w1) var(--w) var(--w);
grid-template-rows: auto auto;
box-sizing: border-box;
border: solid 10px black;
background-color: black;
margin: 0 auto;
}
.grid-container > div {
height: var(--h);
width: var(--w);
}
img {
width: 100%;
height: 100%;
}
.grid-container > :nth-child(1) {
width: var(--w1);
height: var(--h1);
grid-area: A;
}
.grid-container > :nth-child(2) {
grid-area: B;
}
.grid-container > :nth-child(3) {
grid-area: C;
}
.grid-container > :nth-child(4) {
grid-area: D;
}
.grid-container > :nth-child(5) {
grid-area: E;
}
@media screen and (min-width: 1320px) {
.grid-container {
--fw: 1320px;
}
}

<div class="wrapper">
<div class="grid-container">
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
</div>
</div>

在上面的代码中，我选择将屏幕定位在比1320px宽的显示器上，因为这似乎是您要定位的断点。完全有可能逆转这一点，取而代之的是目标显示器小于1320px:

@media screen and (max-width: 1320px) {
.grid-container {
--fw: 100vw;
}
}

当然，这需要将自定义属性设置为：

--fw: 1320px

在"非查询"代码中。

.wrapper {
width: 1320px;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid-container {
--fw: 1320px;
--w1: calc((var(--fw) - 40px + (var(--ratio) * 10px)) / 2);
/* the width of the big rectangle */
--ratio: calc(678 / 399);
--h1: calc(var(--w1) / var(--ratio));
/* the height of the big rectangle */
--h: calc((var(--h1) - 10px) / 2);
/* the height and width of the smaller rectangles */
--w: calc(var(--h) * var(--ratio));
display: inline-grid;
gap: 10px;
grid-template-areas: "A B C""A D E";
grid-template-columns: var(--w1) var(--w) var(--w);
grid-template-rows: auto auto;
box-sizing: border-box;
border: solid 10px black;
background-color: black;
margin: 0 auto;
}
.grid-container > div {
height: var(--h);
width: var(--w);
}
img {
width: 100%;
height: 100%;
}
.grid-container > :nth-child(1) {
width: var(--w1);
height: var(--h1);
grid-area: A;
}
.grid-container > :nth-child(2) {
grid-area: B;
}
.grid-container > :nth-child(3) {
grid-area: C;
}
.grid-container > :nth-child(4) {
grid-area: D;
}
.grid-container > :nth-child(5) {
grid-area: E;
}
@media screen and (max-width: 1320px) {
.grid-container {
--fw: 100vw;
}
}

<div class="wrapper">
<div class="grid-container">
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
<div class="grid-item">
<img src="https://picsum.photos/id/1015/678/399">
</div>
</div>
</div>