开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

基础概念

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

相关优势

灵活性：CSS 网格提供了对行和列的精确控制，使得布局更加灵活。
响应式设计：通过媒体查询和相对单位，可以轻松实现响应式设计。
易于维护：使用 CSS 网格可以减少 HTML 结构的复杂性，使代码更易于维护。

类型

固定大小：使用像素值定义行和列的大小。
百分比大小：使用百分比定义行和列的大小，相对于网格容器的大小。
最小最大值：使用 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，这意味着它会根据内容自动调整大小，可能会收缩到更小的高度。

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

相关搜索:CSS网格容器在Flex容器内收缩(Storybook重现)CSS网格自动折叠行并设置增长限制 CSS网格中灵活的网格行高度 CSS网格-具有自动宽度的自动列行之间的CSS网格间距 CSS网格自动调整每行的宽度 CSS网格-列自动换行完全填充最后一行 CSS网格行具有不同的宽度可伸缩的3行css网格 flexbox中css网格元素的自动高度在颤动中自动缩放网格内的文本 CSS网格-行的高度相同(最大高度)使css网格的行高独立相等 JQuery筛选更新面板内的网格视图行在自动生成的网格上选择行 R: dataframe中每个级别内的随机子集行在CSS网格1的行项目中，行多列 CSS网格单列中嵌套的两行 CSS网格:添加默认的行和列间距如何自动占用css网格中的所有可用空间

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

理解CSS - 笔记

一般而言，和文字相关的属性自动继承，和盒模型相关的属性不会自动继承。同时，CSS 为每个属性都提供了一个通用的值 inherit 用于从父元素继承该属性值。...当要设置的属性值不能自动继承或者父元素没有相应值的定义，该元素会使用默认（初始）值，即行为与`initial`相同 # CSS 工作流程 # CSS 盒模型 # width、height、padding...Inline Formatting Context (IFC) 只包含行级盒子的容器会创建一个 IFC IFC 内的排版规则：盒子在一行内水平摆放一行放不下时，换行显示 text-align...决定一行内盒子的水平对齐 vertical-align 决定一行内盒子在行内的垂直对齐避开浮动 (float) 元素 # 块级排版上下文 Block Formatting Context...分别确定网格中行与列所占大小的划分 grid line 网格线 grid area 网格区域用法： # float 浮动 float 属性常用取值有 left、right、none，使用

1.6K2 0

CSS Grid 那些鲜为人知的内幕

轨道 ❝轨道是两个相邻网格线之间的空间。 ❞ 我们可以将它们看作是网格的列或行。在这个例子中，这是第二行网格线和第三行网格线之间的轨道。网格区域 ❝网格区域是由四条网格线围成的总空间。...❞ 它会动态增长和收缩。其实，网格容器仍然使用流式布局，而流式布局中的块级元素会垂直增长以容纳其内容。「只有子元素使用网格布局进行排列」。...❝grid算法希望确保「每个子元素都有自己的网格单元」。它会根据需要「生成新的行来实现这个目标」。 ❞ 这在我们有可变数量的项目并且我们希望容器自动排布项目的情况下非常方便。...❝为了进一步梳理： justify — 处理列 align — 处理行 content — 处理网格结构 items — 处理网格结构内的 DOM 节点。...这个属性控制单个网格项在其单元格内的垂直位置。 place-content place-content 属性是一个缩写。

1661 0

我如何用一行Css代码使谷歌浏览器的数据网格滚动快10倍

他们似乎一直有内容，导致结论是，谷歌使用的数据网格不使用虚拟渲染。这解释了它的一部分，但500行仍然不是那么多。肯定还有更多......现在，当点击面板时Elements ，我们看到以下信息，首先为完整的网格：显示所选元素的后代元素计数的实时表达如上所示，它产生 16，000 + DOM 元素，仅显示 500 行，这有点过分。...这里要做的显而易见的事情是改变使用具有虚拟渲染的数据网格，但让我们看看我们能否以更少的努力改进已经存在的数据网格。...我只是在面板上添加了一行CSS，说明它不会影响页面上其他元素的布局或样式： on the Elements table { contain: strict; } 如这里所示：就这样...了解更多关于CSS contain 在 MDN. 植入广告：如果您需要一个可执行的数据网格处理 10 万+行与平滑滚动，请务必查看 Bryntum 网格 (由我和我的同事开发).

2.2K1 0

重学前端之BFC、IFC、FFC、GFC

GFC（Grid Formatting Context，网格格式化上下文）定义：GFC 是 CSS3 中 grid（网格）布局模块所创建的一种格式化上下文，它提供了一种二维的布局方式，能像表格一样将页面划分为行和列...，元素可以被精确地放置在特定的行和列交叉形成的网格单元格中，实现非常复杂且规则的页面布局效果。...布局特性及相关属性：定义网格结构：通过 grid-template-columns 和 grid-template-rows 属性来分别定义网格的列和行的尺寸、数量等。...对齐方式：和 FFC 类似，在网格布局中也有多种对齐方式来控制元素在网格单元格内以及整个网格容器内的对齐情况，比如 justify-items（控制元素在单元格内水平方向的对齐）、align-items...（控制元素在单元格内垂直方向的对齐）、justify-content（控制整个网格容器内网格内容在水平方向的对齐）、align-content（控制整个网格容器内网格内容在垂直方向的对齐）等属性，取值同样有

1891 0

分享 10 个常用且必须要掌握的 CSS 知识点

flex-shrink 的默认值为 1。这意味着如果空间小于每个项目所需的空间，则每个项目都会收缩。...CSS 网格布局让我们的生活更轻松。在网格出现之前，我们不得不编写数百行代码并花费大量时间创建一个简单的布局。但是，现在只需几行代码和几分钟的时间。...e) start 起始值对齐网格容器开始处的所有网格项。 f) end end值对齐网格容器末尾的所有网格项 7) align-content align-content 垂直对齐容器内的整个网格。...grid-row 属性来设置网格项的开始和结束行。...有一个内置的 CSS 状态管理计数器。它允许您根据元素在文档中的位置更改元素的外观。 CSS state management counter可用于 1）自动编号网页中的标题。

6.9K1 0

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(1)

描述: flex-shrink 属性指定了 flex 元素的收缩规则, flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据此值。...3.网格布局 (Grid) 描述: CSS 网格是一个用于 web 的二维布局系统，Grid 网格布局设计用于同时在两个维度上把元素按行和列排列整齐, 为啥会出现网格布局？...简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。...(200px, 1fr)); /* 所有行都位于隐式网格内，如果内容尺寸大于 100 像素则会根据内容自动调整。...），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。

6412 0

CSS_Flex 那些鲜为人知的内幕

网格布局网格与弹性盒类似，只要在元素上使用了 display: grid，就会开始使用网格布局算法。此布局算法将根据网格布局算法显示所有子元素。...算法不关心垂直/水平，甚至不关心行/列。所有规则都围绕这个主轴以及垂直运行的交叉轴结构。 ❞ 我们可以轻松切换水平布局到垂直布局。所有规则都会「自动适应」。...>> 两个项目都会收缩，但它们会「按比例收缩」。第一个子元素始终是第二个子元素宽度的 2 倍。 flex-basis和width设置了元素的假设大小。...我们可以通过设置flex-wrap:wrap来让子元素自动换行。 >> 当我们设置flex-wrap: wrap时，项目不会收缩到其假设大小以下。...在每一行内，align-items允许我们将每个单独的子项上下滑动。然而，在整体上，我们有两行在一个单一的 Flex 上下文内！现在，交叉轴将与两行相交，而不是一行。

2971 0

五行Python代码自动换你的电脑桌面壁纸（内附源码和exe）

很多行友问行哥，Python能不能自动更换电脑壁纸呀，今天它来了只需要一行代码，指定图片地址即可更换电脑桌面。加上壁纸文件夹路径，让你随机更换电脑桌面，带来不期而遇的新鲜。...使用爬虫技术，自动下载壁纸自动更换壁纸，让你的电脑每天都有焕然一新的感觉。...星标行哥，为你带来更多好玩的Python应用初级版本使用ctypes工具包，一行Python代码指定壁纸图片的路径（修改函数里的第三个参数），即可更换你的电脑桌面 import ctypes ctypes.windll.user32...这些图片可以自己去下载，也可以参考行哥之前分享的Python代码（自动下载图片，有exe版本）。...并使用time工具包设置时间自动更换壁纸，这里行哥设置的是半个小时更换一张电脑壁纸 import random import ctypes import time import os path = r"C

6.1K2 0

【CSS】1287- 一行 CSS 实现 10 种强大的布局

现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局，它们实现了一些非凡的工作。 01....类似于以前的布局，但现在有侧边栏！要使用一行代码编写整个网格，请使用 grid-template 属性。这使您可以同时设置行和列。...您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。...这会将标题、描述和图像块放在父卡片内的垂直列中。...您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。

4.7K2 0

使用Grid和Flex打造响应式布局：让你的网站“随遇而安”

Flexbox是一种一维布局模型，可以让容器内的元素自动排列和对齐。它就像是一个魔法盒子，可以把里面的元素变成你想要的样子。比如，你可以让元素水平排列、垂直排列、居中对齐等等。...container { display: grid;}定义网格结构接下来，你可以使用grid-template-columns和grid-template-rows属性来定义网格的列和行。...10px */}.item { grid-column: 1 / 3; /* 将网格项放置在第1列到第2列之间 */ grid-row: 1 / 2; /* 将网格项放置在第1行 */}以上就是Grip...large-item 类定义了一个较大的网格项，占据两列的空间。通过这种方式，网格项会自动填充到可用的空白区域中，从而实现更加灵活和紧凑的布局效果。...flex属性的三个值分别代表伸缩比例、收缩比例和基础宽度。

7042 1

前端主流布局方法

块状盒子特性独占一行；支持所有css样式；不写宽度的时候，跟父元素的宽度相同；所占区域是矩形。...概念 CSS网格是一个用于web的二维布局系统。...利用网格，你可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。...grid容器设置项 grid-template-row/columns——定义网格及fr单位基于网格行和列的维度，去定义网格线的名称和网格轨道的尺寸大小。...，这就是因为默认的隐式网格设置是row——按照行来进行自动布局，但是这个时候我们是按照列来进行布局的，所以说我们只要改变属性值为column即可： .grid-demo-12 {

2.2K3 0

CSS Flexbox与Grid：构建响应式布局的艺术

第一行为50px，第二行为自适应高度，第三行为剩余空间 */ } grid-template-areas 定义网格布局的区域（area），通过命名项目并用字符串描述网格结构。.../ .container { grid-gap: 10px 20px; /* 行间距10px，列间距20px */ } grid-auto-columns 和 grid-auto-rows 定义自动填充网格时新添加行或列的轨道大小...100px，最大高度自适应内容 */ } grid-auto-flow 控制网格项目如何自动填充和排列。...*/ } CSS Grid 与 Flexbox 结合在某些情况下，我们可以结合CSS Grid和Flexbox的优点，创建更复杂的响应式布局。...CSS Grid 更适合处理二维布局，如表格或复杂网格布局，以及精确的单元格控制。

1401 0

使用 CSS Grid 的响应式网页设计：消除媒体查询过载

使用 CSS Grid，元素可以在这些行和列内轻松对齐，从而彻底改变了我们设计网站的方式。...让我们通过简单的示例来探讨它们：1、Repeat()CSS Grid 中的 repeat() 函数允许你定义网格列或行的模式。它简化了重复某种大小或模式的过程，而无需逐个列出每个列。...这种简写符号通过自动生成所需数量的具有一致大小的列，从而节省了时间和精力。2、Auto-fitauto-fit 函数是一个强大的工具，根据网格容器内的可用空间自动调整列数。...通过这个配置，网格将创建尽可能多的列以适应容器，同时保持指定的宽度。列数将根据可用空间自动进行响应性调整。两行的高度将保持在每行100像素的高度上。...让我们分解使用的不同CSS属性：display: grid;：此属性将容器元素定义为网格容器，建立一个新的网格格式上下文。这允许你创建具有行和列的网格布局。

3061 0

「译」Flexbox 基本原理

它是一种布局模型，允许我们方便地控制 html 元素之间的空间分布和对齐 [2]。 Flexbox 一次只能控制一个维度的定位（行或者列）。二维定位的控制需要依靠网格布局 [2]。...flex-wrap 的默认值为 nowrap，这意味着如果容器不能在保留项目原始宽度的同时将它们排列成一行的话，项目将会收缩以进行适应。如果由于某些原因无法收缩，则项目会溢出容器外 [1][3]。...当第一行的宽度不足以容纳 300px 时，项目不再溢出容器外，而是会换行 [3]。每一行都应该被视为是一个独立的弹性容器，任何一个容器内的空间分布均不会影响与之相邻的其他容器 [2]。 ?...align-items 属性实际上是通过给容器内的所有项目设置 align-self 而生效的。通过单独设置 align-self，可以覆盖先前设置的总的属性值。...手动给每个属性添加前缀是一项非常繁琐的任务，并且还会徒增样式维护的难度。作为替代方法，Gulp 可以自动化地完成这些任务。要使用 Gulp，我们需要将其作为依赖项添加到项目中。

2K3 0

六大布局之非常用布局

shrinkColumns设置被收缩的列的序号，收缩是用于在一行中列太多或者某列的内容文本过长，会导致某列的内容会被挤出屏幕，这个属性是可以帮助某列的内容进行收缩，用于防止被挤出的。 ?...android:layout_column="2"表示跳过第二个，直接显示在第三个单元格内。 ? layout_span 为该子类控件占据第几列。...六大布局之GridLayout 简介 GridLayout（网格布局）是在Android 4.0以后引入的一种新的布局模式，和表格布局是有点类似的，但比表格布局的好，功能也是很强大的，它可以设置布局有多少行和有多少列...android:rowCount为可以设置行数，要多少行设置多少行，如android:rowCount="2"为设置网格布局有2行。...表格布局：指以行列的形式放置子控件，每一行是一个TableRow对象或者View对象。网格布局：指以网格状放置子控件，可以控制网格内部行、列个数。

1.6K1 0

【图片版】CSS网格布局（Grid）完全教程

简言 CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局一直不够理想。...为了获得最佳的阅体验，可以访问如下格式的教程：学习CSS网格 1 网格容器将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目...长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。本例中，第一行最小高度设置成100px，但是最大高度设置成auto，表示行高可以根据内容伸长超过100px。...第2行轨道有隐式网格自动创建并为项目 3 和 4 分配了空间。属性grid-auto-rows 定义了隐式网格的行轨道尺寸，即项目3和4的高度是 140px 。...[层叠网格项目演示2] 演示程序 16 网格项目的对齐方式 CSS的盒模型对齐模块补充了CSS网格的内容，网格项目可以按行或列的轴线方向实现多种对齐方式。

5K10 0

CSS Flexbox 可视化手册

是一种可以轻松控制html元素之间的空间分布和对齐的布局模型。 Flexbox同一时间只能控制行或列中的一个维度。对于二维控制需要 CSS 网格布局。 ? 首先给出如下模板： ?...在默认情况下，flex-wrap被设置为 nowrap，这意味着如果容器不能适应在其内的行中原始宽度的项目，则这些项目将会缩小来进行适应。如果它们因为某种原因无法收缩，则会溢出容器。...当第一行不足以容纳300px时，则该项目将换行到新的一行，而不是溢出容器。应该把其中的每一行都视为单独的弹性容器。一个容器中的空间分布不会影响到与其相邻的其他容器。 ?...align-items 属性实际上通过在容器内的所有 flex 项目上设置 align-self 来实现。通过单独设置 align-self，可以覆盖全局值。...手动自动为每个属性添加前缀可能是一项非常繁琐的任务，也使样式很难维护。使用 Gulp能够替你自动执行这些任务。为了能够使用Gulp，我们必须将它作为依赖添加到项目当中。

3.1K2 0

分享一些关于 CSS Grid 基础入门知识

网格系统（CSS Grid）是CSS中最重要的特性之一。它能够以简单的方式将元素对齐到列和行中。CSS网格使得设计复杂且响应式的网页变得更加容易，无需使用浮动、表格或定位。...这样，它会根据屏幕大小自动拉伸列的宽度。...它与grid-template-columns类似，唯一的区别是现在我们是在处理行而不是列。假设我们想要定义一个具有两列和两行的网格容器。...，或者像我们使用grid-template-columns那样自动拉伸行的宽度。...它们之间没有区别，只是我们是在处理行而不是列。网格间隔属性（grid-gap）网格间隔属性grid-gap用于在父元素内设置列和行之间的间隔。

2093 0

flex大法：一网打尽所有常见布局

然后其所有的直接子元素就变成flex子元素了，在flex里存在两根轴，叫主轴和交叉轴，互相垂直，主轴默认水平，flex子元素默认会沿主轴排列，可以控制flex子元素在主轴上伸缩，主轴方向可以设置，相关的css...可以看到头和尾都没了，这是因为flex-shrink的原因，这个也是flex子元素上的属性，用来控制当子元素的尺寸之和已经超过容器了要怎么收缩元素，默认值为1，就是按比例减去要收缩的空间，理论上是这样，...flex子元素按order的数值大小来排序显示，我们可以默认左边的设为2，右边的设为3，然后在偶数行再给右边的设为1，自然就跑到前面去了：网格布局此网格非grid布局，虽然网格列表用grid是最好的...其实我们可以使用内边距来做间距，设置一下子元素的box-sizing:border-box，让内边距包含在宽度内，这样就可以放心的把子元素的宽度设为25%了，当然这样的缺点是里面得再嵌套一个元素用来作为实际的内容容器...高度自动对齐有些时候同一列的元素为了美观我们希望他们的高度是一样的，如果内容固定不变当然可以直接写死高度，但如果可变的话就不能写死了：这个场景使用flex完全不需要额外设置什么属性，只要给容器元素设置

8951 0

【CSS】最强大的布局之grid布局精讲

看这个就够了详解 CSS3中最好用的布局方式——flex弹性布局（看完就会） [前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（...它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。 Grid 布局则是将容器划分成 “行” 和 “列” 产生单元格，然后指定 “项目所在” 的单元格，可以看作是二维布局。...单元格每行每列都会分布单元格，在单元格内我们可以添加想要的内容。网格线格子的边框为网格线，分为上下网格线和左右网格线。...: 100px 100px 100px; /* 设置行数同时设置了行的宽度如果没有设置行数将会自动根据元素数量自动设置*/...，在100px*100px内的方格内水平垂直居中，整个网格也水平居中在了页面中，如果不设置红色方块大小的话里面的文字将会水平垂直居中。

2.9K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭