只允许css网格内的行子集自动收缩

基础概念

CSS 网格（Grid）是一种二维布局系统，允许你在行和列中排列元素。网格容器中的行和列可以通过不同的属性进行设置，以实现灵活的布局。grid-template-rows 和 grid-template-columns 属性用于定义网格的行和列的大小。

类型

固定大小：使用像素值定义行和列的大小。
百分比大小：使用百分比定义行和列的大小，相对于网格容器的大小。
最小最大值：使用 minmax() 函数定义行和列的最小和最大大小。
自动大小：使用 auto 关键字，让浏览器根据内容自动调整大小。

应用场景

复杂布局：适用于需要精确控制行和列的复杂布局。
响应式网页设计：结合媒体查询，可以实现不同屏幕尺寸下的不同布局。
仪表盘和仪表板：常用于创建复杂的仪表盘和仪表板布局。

问题描述及解决方案

问题描述

你希望只允许 CSS 网格内的行子集自动收缩，而不是所有行都自动收缩。

原因分析

默认情况下，CSS 网格中的行会根据内容自动调整大小。如果你希望只有特定的行自动收缩，需要对这些行进行特殊设置。

解决方案

可以使用 minmax() 函数结合 auto 关键字来实现这一需求。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-rows: minmax(100px, auto) minmax(auto, auto) minmax(100px, auto);
            gap: 10px;
            height: 100vh;
        }
        .grid-item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Row 1</div>
        <div class="grid-item">Row 2 - This row will auto-shrink if necessary</div>
        <div class="grid-item">Row 3</div>
    </div>
</body>
</html>

解释

grid-template-rows: minmax(100px, auto) minmax(auto, auto) minmax(100px, auto);：
- 第一行和第三行设置了最小高度为 100px，最大高度为 auto，这意味着它们不会自动收缩到小于 100px。
- 第二行设置了最小高度和最大高度都为 auto，这意味着它会根据内容自动调整大小，可能会收缩到更小的高度。

通过这种方式，你可以精确控制哪些行会自动收缩，哪些行不会。