在没有实现任何双屏代码的情况下，如果用户想要将浏览器跨过两个显示器，那么页面将是这样的。
如果我们向下滚动：
如果用户选择跨越两个显示器，则内容会被铰链遮挡。
不是很好。我们的内容被铰链遮住了，所以让我开始重新定义我的网格。
对于我的网格列，我仍将使用三列，但我希望一列占据左侧的第一个视口段，另外两列占据右侧视口段，因此我将使用我的 CSS环境变量env(viewport-segment-width 0 0)告诉浏览器，对于我的第一列，我希望它占据第一个显示区域的整个视口。
@media (horizontal-viewport-segments: 2) {
/* Body styles for smaller screens */
body {
font: 1.3em/1.8 base, 'Playfair Display', serif;
margin: 0;
}
.recipe {
grid-template-columns: env(viewport-segment-width 0 0 1fr 1fr;
grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
}
}
对于我的行，我希望在放置上更灵活一点，所以我将重复两行175px，这是关于带有配方标题、产量和时间信息的容器的高度，之后的行应该匹配我最初在网格中定义的内容。
如果我在 DevTools 中检查我的设计，我可以看到我在配方容器上设置的width和margin最初将我想要与我的视口段对齐的网格线推到正确的视口段中。
添加我的代码后，我的内容不再被遮挡，但仍需要一些间距调整。
要重置它，我将重置我的marginand max-width。
@media (horizontal-viewport-segments: 2) {
.recipe {
grid-template-columns: env(viewport-segment-width 0 0) 1fr 1fr;
grid-template-rows: repeat(2, 175px) minmax(175px, max-content);
margin: 0;
max-width: 100%;
}
}
重置我的边距和填充会掩盖右侧显示中的内容。
现在我要把我的内容放在网格中并调整我的布局。
.recipe-meta {
grid-column: 1 / 2;
padding: 0 2rem;
}
img {
grid-column: 2 / 4;
grid-row: 1 / 3;
width: 100%;
height: 100%;
object-fit: cover;
/* necessary to keep the image within the grid lines */
}
.recipe-details__ingredients {
grid-row: 2;
padding: 0 2rem;
}
.recipe-details__preparation {
grid-column: 2 / 4;
grid-row: 3;
padding: 0 2rem 0 3rem;
}
我已经对内容应用了填充，除了我决定要跨越整个视口的图像。对于图像下方的内容，由于从物理铰链下方开始的网格线的性质，我想添加额外的填充，因此它看起来左侧的填充与其他带有填充的项目相同。如果我不添加额外的，它会落得太靠近铰链。因为我已经有一个 grid-gap1rem并且我想将 padding 加倍，所以我将添加3rem而不是4rem为我们提供双屏设备上的最终布局：
