时间戳

首页 > 解决方案 > 计算网格容器范围之外的列大小

html - 计算网格容器范围之外的列大小

问题描述

在我的网格系统中，容纳网格的容器对于所有断点都是完整的浏览器宽度，但一个:xl或1920px以上。容器上方1920px的最大宽度为1920px并以屏幕为中心，因此外部排水沟的大小不同，具体取决于视口的宽度。计算这个容器内的列宽是一件轻而易举的事。如果我想要一个元素跨越 6 列，我只需这样做：

width: calc((6 / 12 * 100%) - 24px;

在伪代码中，分解如下：

width = (columns / totalColumns) - gutter;

现在这是我的难题：我正在添加一个存在于网格容器范围之外的元素，但不知何故需要能够使其也符合网格布局。它本质上是一个覆盖，并且是position: fixed. 覆盖用半透明背景填充整个视口，并有一个内部元素称为.Panel（下面屏幕截图中的白色框）。

.Panel每个断点有两种大小：default和expanded. 对于大多数断点，default等于50vw - gutter（下面屏幕截图中的顶部示例）。简单的。没问题。Gutters 对所有断点都有静态px大小，因此它们非常易于使用。但是，expanded有点棘手。

对于expanded状态，.Panel将必须贴在屏幕的右侧，而左侧.Panel必须从第 2 列开始。这是一个视觉帮助：

面板布局

由于列宽使用百分比值，我不完全确定如何单独在 CSS 中进行计算以确保无论您的1920px-and-up 视口大小如何，.Panel都将从第 2 列开始并在右侧结束的视口。

关于如何解决这个问题的任何建议？

标签： htmlcss

解决方案

好的，所以我最终解决这个问题的方法是将我的叠加层移动到网格容器中。原因是我无法从外部访问网格容器的范围（容器内部的 50% 意味着与外部 50% 不同的东西），但我可以从内部访问视口的范围（视口单位）网格容器。

添加此行可确保覆盖面板从正确的列开始并一直延伸到网格容器之外一直到视口的右侧：

margin-right: calc((50vw - 100% / 2) * -1);

伪代码：

margin-right: calc((half_viewport_width - grid_container_width / 2) * -1);

这只是获取视口的宽度，减去网格容器的宽度，让我在网格容器和视口边界之间留下排水沟。我只需要一个排水沟的大小，所以我除以 2。最后，我们需要负边距，所以我乘以 -1。

body {
    background-color: grey;
    margin: 0;
}

.wrapper {
    background-color: tomato;
}

.grid-container {
    background-color: pink;
    display: flex;
    margin: 0 auto;
    max-width: 800px;
}

.panel {
    background-color: white;
    flex-grow: 1;
    height: 50vh;
    margin-left: 25%;
    margin-right: calc((50vw - 100% / 2) * -1);
    width: 75%;
}
<div class="wrapper">
    <div class="grid-container">
        <div class="panel">
            Panel!
        </div>
    </div>
</div>

推荐阅读