开始溢出时完全隐藏列

Question

我正在构建一个涉及页面右侧形状网格的应用程序。该网格由 5 个方格组成，每个方格的高度和宽度都除以视口高度的 5（一起占据视口的整个高度）。通常有4排形状（每排共80vh的宽度）。

我需要将页面分成两部分：40vw 专用于左侧内容，最多 60vw 专用于网格。右侧格子不能溢出到内容中

我面临的问题是，如果容器的高度太大，形状会溢出指定的 60vw。我想知道如果网格溢出 60vw，是否有办法完全隐藏一列。我尝试隐藏溢出，但这隐藏了溢出的列的一部分，而不是整个列。

我在下面附上了我正在使用的代码以及一些注释来说明问题。

感谢您抽出宝贵时间阅读本文:),

安德烈

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="container">
            <div class="content"></div>
            <div class="shapes">
                    <div class="grid-container">
                        <div class="grid-col">
                            <div class="grid-item">1</div>
                            <div class="grid-item">2</div>
                            <div class="grid-item">3</div>
                            <div class="grid-item">4</div>
                            <div class="grid-item">5</div>
                        </div>
                        <div class="grid-col">
                            <div class="grid-item">1</div>
                            <div class="grid-item">2</div>
                            <div class="grid-item">3</div>
                            <div class="grid-item">4</div>
                            <div class="grid-item">5</div>
                        </div>
                        <div class="grid-col">
                            <div class="grid-item">1</div>
                            <div class="grid-item">2</div>
                            <div class="grid-item">3</div>
                            <div class="grid-item">4</div>
                            <div class="grid-item">5</div>
                        </div>
                        <div class="grid-col">
                            <div class="grid-item">1</div>
                            <div class="grid-item">2</div>
                            <div class="grid-item">3</div>
                            <div class="grid-item">4</div>
                            <div class="grid-item">5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 40vw 60vw;
}

.shapes {
    display: grid;
    justify-content: right;
    background-color: teal;
    width: 60vw;
}

.grid-container {
    display: grid;
    grid-template: 20vh / 20vh 20vh 20vh 20vh;
    width: 80vh;
}

.grid-item {
    outline: 2px solid #000;
    outline-offset: -2px;
}

body {
    margin: 0;
}

.grid-item {
    height: 20vh;
    text-align: center;
}

.content {
    background-color: blanchedalmond;
}

Works in image 1

Does not work in image 2

Answer 1

当右侧的宽度小于 4 个正方形的宽度时，即当：60vw < 80vh - 即 vw/vh < 4/3

时，问题就开始了

我们可以在 CSS 中通过对视口的纵横比使用媒体查询来对此进行测试

@media (max-aspect-ratio: 4/3)

之后60vw小于60vh、40vh、20vh时出现问题

此代码段测试了所有这些情况并隐藏了相关列。

.container {
  display: grid;
  height: 100vh;
  grid-template-columns: 40vw 60vw;
}

.shapes {
  display: grid;
  justify-content: right;
  background-color: teal;
  width: 60vw;
}

.grid-container {
  display: grid;
  grid-template: 20vh / 20vh 20vh 20vh 20vh;
  width: 80vh;
}

.grid-item {
  outline: 2px solid #000;
  outline-offset: -2px;
}

body {
  margin: 0;
}

.grid-item {
  height: 20vh;
  text-align: center;
}

.content {
  background-color: blanchedalmond;
}

@media (max-aspect-ratio: 4/3) {
  .grid-container .grid-col:nth-child(1) {
    visibility: hidden;
  }
}

@media (max-aspect-ratio: 1/1) {
  .grid-container .grid-col:nth-child(2) {
    visibility: hidden;
  }
}

@media (max-aspect-ratio: 2/3) {
  .grid-container .grid-col:nth-child(3) {
    visibility: hidden;
  }
}

@media (max-aspect-ratio: 1/3) {
  .grid-container .grid-col:nth-child(4) {
    visibility: hidden;
  }
}

<div class="container">
  <div class="content"></div>
  <div class="shapes">
    <div class="grid-container">
      <div class="grid-col">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
      </div>
      <div class="grid-col">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
      </div>
      <div class="grid-col">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
      </div>
      <div class="grid-col">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
      </div>
    </div>
  </div>
</div>
</div>

开始溢出时完全隐藏列

Completely hide column when it starts to overflow

html

css

grid

overflow