CSS：如果网格行/项目不适合可用高度，则删除它们

Question

在下面的测试页面中，我在

<body>

中配置了一个网格，其高度与浏览器窗口大小相关。在其中一列中，有

aside

，它本身具有 1 列 4 行网格，其中两个固定高度标题后面跟着框，猜猜看，框本身也是 1 列网格。

此类盒子的项目（网格行）不必增大或缩小，我对它们内容的高度很满意。我正在寻找的行为是：如果浏览器窗口不够高，无法以自然高度显示所有项目，则此类内部框（

.asidebox

类）应仅显示尽可能多的项目。

如果

.asidebox

1) 能够垂直收缩以适应窗口而不溢出，并且 2) 配置了

grid-template-rows: repeat(auto-fit, ...)

，这就是我期望发生的情况。

一定是我听错了。到目前为止，我已经能够通过各种不同的设置获得除此之外的任何内容。下面的 asidebox

 类代码对其中一些配置及其效果进行了注释。我还以各种组合使用了

grid-template-rows

 选择器的

aside

，但没有任何效果符合我的预期。甚至连你知道的人或事也无法提供帮助。

那么...如果网格行不适合外部定义的高度，是否有一种仅 CSS 的方法可以删除网格行？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p, h1, h2, h3, h4 {
            margin: 0;
            padding: 0;
        }
        
        body {
            display: grid;
            margin: 0;
            border-bottom: 3px solid purple;
            background-color: #f1e2ad;
            grid-template-columns: 5fr minmax(min-content, 30%);
            grid-template-rows: 99vh;
            overflow-y: hidden;
        }

        aside {
            background-color:darkkhaki;
            display: grid;
            /* align-content: start; */
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr auto minmax(0, 1fr);
        }
        
        .asidebox {
            display: grid;
            min-height: 0;
            
            /* Items will grow, but won't shrink; areas both overflow and overlap. Same
                effect of simply not configuring grid-template-rows:
            grid-template-rows: repeat(auto-fit, min-content);  */

            /* First row initially bigger, will hide behind the rest of the box on resize:
            grid-template-rows: repeat(auto-fit, minmax(0, 100%)); */

            /* Items will grow and shrink to 0, but won't be removed: 
            grid-template-rows: repeat(auto-fit, minmax(0, 1fr));  */

            /* Might do it but is invalid: 
            grid-template-rows: repeat(auto-fit, clamp(0, min-content, 1fr));  */

            /* Neither are accepted as well:
            grid-template-rows: repeat(auto-fit, auto);
            grid-template-rows: repeat(auto-fit, 1fr);  */

            /* Items won't grow, but will shrink to 0 instead of being dropped:
            grid-template-rows: repeat(auto-fit, minmax(0, min-content)); */

            /* Also invalid:
            grid-template-rows: repeat(auto-fit, minmax(min-content, 1fr)); 
            grid-template-rows: repeat(auto-fit, minmax(1fr, min-content)); */ 
        }

        .asidebox > article {
            border: 2px solid green;
            padding: 2px;
            background-color: yellow;
    </style>
</head>
<body>
    <div id="esq"></div>
    <aside id="dir">
        <h2>News</h2>
        <div class="asidebox">
            <article class="news">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="news">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="news">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
        </div>
    
    
        <h2>Top reporters</h2>
        <div class="asidebox">
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
            <article class="user">
                <h4>Title</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
            </article>
        </div>
    </aside>
</body>
</html>

Answer 1

使用 Flexbox 绝对可行。在下面的代码片段中，我对您的代码进行了以下更改：

在

body

 元素上，隐藏两个轴上的溢出：

身体{ 溢出：隐藏； }

在
.asidebox
```
元素上，将它们设置为列弯曲而不是网格，允许不适合换行的项目：
```
.asidebox { 显示：柔性；弹性方向：列；弹性包裹：包裹； }
允许弹性项目增长：

.asidebox > 文章 { 弹性：1； }

p, h1, h2, h3, h4 {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  margin: 0;
  border-bottom: 3px solid purple;
  background-color: #f1e2ad;
  grid-template-columns: 5fr minmax(min-content, 30%);
  grid-template-rows: 99vh;
  overflow: hidden;
}

aside {
  background-color: darkkhaki;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto minmax(0, 1fr);
}

.asidebox {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 0;
}

.asidebox > article {
  border: 2px solid green;
  padding: 2px;
  background-color: yellow;
  flex: 1;
}

<div id="esq"></div>
<aside id="dir">
    <h2>News</h2>
    <div class="asidebox">
        <article class="news">
            <h4>Title 1</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
        <article class="news">
            <h4>Title 2</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
        <article class="news">
            <h4>Title 3</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
    </div>


    <h2>Top reporters</h2>
    <div class="asidebox">
        <article class="user">
            <h4>Title 4</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
        <article class="user">
            <h4>Title 5</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
        <article class="user">
            <h4>Title 6</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
        <article class="user">
            <h4>Title 7</h4>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit</p>
        </article>
    </div>
</aside>

CSS：如果网格行/项目不适合可用高度，则删除它们

问题描述投票：0回答：1

1个回答

最新问题

CSS：如果网格行/项目不适合可用高度，则删除它们

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1