为什么CSS Grid的自适应列在移动视图中不能折叠？

CSS Grid的自适应列在移动视图中不能折叠的原因是因为在移动设备上，屏幕空间有限，需要更好地利用可用空间来展示内容。CSS Grid的自适应列是通过设置网格容器的列宽来实现的，当屏幕空间不足时，列宽会自动调整以适应屏幕大小，但并不会折叠。

这种行为是由CSS Grid的设计决策所决定的。CSS Grid是一种强大的布局系统，它允许开发者以网格的形式来组织页面布局，使得页面元素可以在网格中自由地定位和调整大小。自适应列是CSS Grid的一个重要特性，它可以根据网格容器的大小自动调整列的宽度，以适应不同的屏幕尺寸。

然而，在移动视图中，由于屏幕空间有限，如果自适应列可以折叠，可能会导致内容的丢失或者布局的混乱。为了保证页面的可读性和用户体验，CSS Grid的自适应列在移动视图中不能折叠。

在移动视图中，通常会使用媒体查询（Media Queries）来针对不同的屏幕尺寸应用不同的样式和布局。通过媒体查询，开发者可以根据屏幕尺寸的变化，选择性地隐藏、显示或重新排列页面元素，以适应移动设备的显示需求。

总结起来，CSS Grid的自适应列在移动视图中不能折叠是为了保证页面的可读性和用户体验。在移动视图中，可以通过媒体查询来应用不同的样式和布局，以适应移动设备的显示需求。

腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务：https://cloud.tencent.com/product/tke
腾讯云音视频处理：https://cloud.tencent.com/product/mps
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/tencent-metaverse

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

有帮助

没帮助

相关·内容

CSS进阶03-定位体系，格式化上下文，常规流

CSS2.2中对这个规定有了新的解释。引入了表格式化上下文。并且声明，在CSS的未来级别，将引入其他类型的格式化上下文。果不其然，CSS3中，引入了GFC，FFC和RFC 4....BFC常见用途：常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。防止margin折叠。防止高度塌陷。 4.2....我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid...item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。...多栏布局（column-*）在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素。 Flexbox 下的子元素不会继承父级容器的宽度。

1.7K1 0

你可能不知道的「 CSS 容器查询」

我们的系统能不能改成自适应布局啊? 我顿时虎躯一震：woc, 要把一个迭代了一年多的固定设计的产品，改成自适应布局? 真让人害怕 ???。...这可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。例如，以下组件可能显示在网站布局的窄或宽列中。如果有空间，它将显示为两列，否则，我们希望将其堆叠显示。...上图中的左右两个组件，是同一个组件，功能上是完全一样的，只是要展示不同的布局。...目前而言，我们可以通过以某种方式识别该组件，比如通过添加一个类或使用其他选择器来定位元素，该选择器可以查看它在文档结构中的位置。但是，这并不能完全实现媒体查询在整个布局中的作用。...为了使卡仅在边栏宽于700px时才显示为两列，我们使用以下CSS： @container (min-width: 700px) { .card { display: grid; grid-template-columns

1.6K3 0

建议收藏！总结了42种前端常用布局方案

完成左列定宽右列自适应 步骤如下：左边列开启浮动通过外边距的方式使该容器的左边有左边列容器的宽度的外边距实现CSS代码如下： .left { /* 左边列开启浮动 */ float: left...右列容器开启右浮动使中间自适应的宽度为父级容器减去两个定宽的列实现CSS代码如下： .left { /* 1....Flex方案实现步骤如下开启 flex 布局将子元素布局方向修改为垂直排列设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部设置中间部分容器高度为自适应 实现CSS代码如下：...Grid方案实现步骤如下开启 grid 布局置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部实现CSS代码如下： .main { /* 开启grid布局 */ display...: grid; grid-template-rows: auto 1fr auto; /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */ min-height

4.2K3 0

建议收藏！总结了 42 种前端常用布局方案

4.2K3 0

万字总结 CSS 布局

由于文档流的限制，极大限制了我们的网页，例如：能并排的不能改宽高等。所有，我们需要脱离标准文档流。 CSS中有三种手段可以使一个元素脱离标准文档流，分别为「浮动」、「绝对定位」和「固定定位」。...你可以通过设置top、left、bottom和right偏移量属性来将元素移动到你想要的位置。但是通常情况下你并不希望元素相对于视口进行定位，而是相对于容器元素。...5.2.2 行和列容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。上图中，水平的深色区域就是"行"，垂直的深色区域就是"列"。...，直到容器不能放置更多的列。...grid-auto-flow: column dense; 上面代码的效果如下。上图会先填满第一列，再填满第2列，所以3号项目在第一列，4号项目在第二列。8号项目和9号项目被挤到了第四列。

5.7K2 0

59道CSS面试题(附答案)

不同点是float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止， absolute会覆盖文档流中的其他元素，即遮盖现象。...（3） JavaScript是网站中实现前后台交互效果、网页动画效果的一种开发语言，比如鼠标单击（ click）事件、前后台数据请求（Ajax）等。 10、为什么要初始化CSS？...可以通过在网格容器（ grid container）上定义网格定义行（ grid definition row）和网格定义列（grid definition column），在网格项目（ grid item...）上定义网格行（ grid row）和网格列（grid column）来为每一个网格项目定义位置和空间。...自适应的单位有以下几个百分比：% 相对于视口宽度的单位：ww 相对于视口高度的单位：vh 相对于视口宽度或者高度（取决于哪个小）的单位：Vm 相对于父元素字体大小的单位：em 相对于根元素字体大小的单位

5K5 0

低代码如何构建响应式布局前端页面

一般来说，在处理这样的问题时，我们需要开发和提供不同的布局，通过检测视口的分辨率，判断当前访问设备的种类，请求不同的页面布局从而提供尺寸较为合适的展示场景。...网格（Grid）布局网格布局（Grid）是CSS（层叠样式表，为网页添加页面样式的一种计算机语言）布局方案的一种，也是泛用性最广泛的一种。...自适应模式在活字格中，自适应代表的不是页面自适应，而是组件的自适应。活字格的页面设计是所见即所得的，每一个组件都是通过单元格的组合而形成。...在活字格中，范围模式提供了按照像素与占比两种方式来设定范围活字格的范围模式设置界面上图中的最大值占比，代表的是当且设置的列，在整个页面占据的比例为1份，也就是说，如果整个页面，只有当前列被设置了占比为...多行区域的单元格范围设置通过设置范围模式达到内容自动填充页面的效果总结通过对页面拉伸和行列设置灵活运用，活字格所涉及的应用可以灵活的适应不同尺寸下的展示终端，此外，活字格还提供了移动端的界面，方便用户在移动端下

4K4 0

前端常用布局方案总结

设置该元素的偏移量，值为50%； (4). 通过外边距-值的方式将元素移动回去。...两列布局所谓的两列布局就是一列定宽，一列自适应的布局。...左列容器开启左浮动； (3). 右列容器开启右浮动； (4). 使中间自适应的宽度为父级容器减去两个定宽的列。...设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部； (4). 设置中间部分容器高度为自适应。...Grid方案实现步骤： (1). 开启 grid 布局； (2). 设置最小高度为当前视口，不管中间部分有多高，始终都可以保持在底部。

2.7K3 0

学姐叫我看 CSS 新出的容器查询，然后把公共组件重构成响应式的！

在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。这就是在过去10年中设计Web布局的方式。...喔或，这是一个很好的问题。问题是，只有当视口宽度大于特定值时，开发人员才会使用组件的变体。例如，如果我在平板中使用 featured 也就是 PC 的样式，它不能工作，为什么?...此外，我们可以在任何想要的地方定义它们，这意味着如果需要，我们可以在顶级容器上进行查询。现在大家已经理解了CSS容器查询的基本思想，在看看下面图片加深一下映像。在左边，这是一个正在调整大小的视口。...在CSS网格中，我们可以通过使用auto-fit关键字告诉浏览器，如果列的数量低于预期，我们希望展开列(您可以在这里阅读更多相关内容)。...CSS容器查询用例我们来探索一些可以使用CSS容器查询实现的用例。聊天列表我在Facebook messenger上看到了这种模式。聊天列表根据视口宽度改变。

2.2K3 0

CSS进阶04-块格式化上下文BFC

盒的宽高其实是有着很复杂的计算方法，这一点我们在CSS进阶系列后面的文章中详细说明。这里我们来看一个例子： <!...就是说对于标准流中的块级非替换元素，如果其overflow最终计算结果为visible，那么高度只会考虑其在标准流中的子元素（比如，移动和绝对定位的盒子是会被忽略的，相对定位的盒子只会考虑其未被定位前的位置...4.2 可以看到，div2即使包含在另一个块盒中，但是如果与div1在同一个BFC且相邻，一样会产生margin折叠。...4.3 多栏布局(更多内容可以参考BFC与多列布局) 4.3.1 两栏布局特点：侧边栏宽度固定，内容栏可以根据浏览器宽度自适应。 <!...前端精选文摘：BFC 神奇背后的原理 BFC与多列布局前端精选文摘：BFC 神奇背后的原理

6003 0

如何做一个自适应网页？

，通常移动端和web端是分开的，也就是会搞两套，一个移动版本，一个pc版本，并且两者的功能要同步迭代，典型的例子就是 m.taobao.com 和 taobao.com 自适应网页设计 自适应网页设计是一种网页设计...{ margin: 1em 2em; } } 这段css表示的意思就是当前视口至少要有800像素，才会给.container选择器加上对应的css样式，你可以加入很多这样的条件，调整页面显示的最佳尺寸...，改变相应的样式，这种行为被称为断点同时在设计项目的时候，我们可以先完成一个手机端的页面，然后通过断点的方式不断完善pc的展示效果，这种通常被叫做移动优先设计现代自适应布局在很久之前，我们经常使用...float进行多列布局，但是出现css3之后，现在我们通常使用flex、grid等现代的方式进行，本质是通过参照容器的空间大小，缩小或者放大每个元素分布的空间，达到动态平衡，更改flex-grow以及flex-shrink...: 500px; } } _Users_01394862_Downloads_A liquid layout.html (2).png 这种自适应的方式在切换起来很流畅，并且布局的改动在grid的加成下变得异常简单明了

5112 0

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

长单词和链接当在移动屏幕上阅读一篇文章时，一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...网格中auto-fit和auto-fill之间的差异的误解在CSS grid中，repeat函数可以创建响应列布局，而不需要使用媒体查询。...简而言之，auto-fill将在不扩展列宽的情况下对列进行排列，而auto-fit只会在列为空的情况下将列折叠到零宽度。 8....使用 CSS grid 定义 main 和 aside 元素 CSS grid 常规布局中 main 和 aside 部分，为了让布局更加的完美，我们应该让 aside 高度等于 main 高度，即使...压缩或拉伸图像在CSS中调整图像大小时，如果宽高比与图像的宽度和高度不一致，则可能会对其进行压缩或拉伸。

3.7K1 0

几种常见的CSS布局

//html部分同上 .parent { display:grid; grid-template-columns:auto 1fr; grid-gap:20px } 三、三栏布局特征：中间列自适应宽度...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。在制作样式之前需要一张类似下面的背景图： ?...参考文章双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS 两列布局---左侧固定，右侧自适应 两列自适应布局的四种思路 css常见布局之九：三栏布局的常见实现【布局】聊聊为什么淘宝要提出...「双飞翼」布局 CSS的单列布局与二&三列布局

8952 0

几种常见的 CSS 布局

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式 1.float+overflow:hidden 如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，...//html部分同上 .parent { display:grid; grid-template-columns:auto 1fr; grid-gap:20px } 三、三栏布局特征：中间列自适应宽度...③ 缺点 center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。...实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。在制作样式之前需要一张类似下面的背景图： ?...参考文章双飞翼布局介绍-始于淘宝UED CSS三栏布局的四种方法 CSS 两列布局---左侧固定，右侧自适应 两列自适应布局的四种思路 css常见布局之九：三栏布局的常见实现【布局】聊聊为什么淘宝要提出

9082 0

深入学习下 CSS 间距相关的知识

在 CSS 网格中，可以使用 grid-gap 属性轻松地在列和行之间添加间距。...它是行间距和列间距的简写。...按需差距我真正喜欢 CSS 网格的地方是 grid-gap 仅在需要时才应用，考虑以下模型。我有一个有两张卡片的部分。在移动设备上，我希望间距低于第一个，而在桌面上，间距将在它们之间。...在使用 :not 选择器之前无法覆盖它。如果设计有多于一列，它将不起作用，见下图。关于解决方案 #2，它没有 CSS 特异性问题。但是，它仅适用于一个列堆栈。...CSS 数学函数：Min()、Max()、Clamp() 是否有可能拥有动态margin？例如，根据视口宽度设置具有最小值和最大值的边距。答案是肯定的！我们可以。

13.4K4 0

Bootstrap实用手册

视口－ viewport IOS 中的 Safari 最早引入的概念视口：移动设备中，浏览器里显示网页的一块区域(PC 端会忽略) 对于响应式网页，设置视口的信息： (1)....视口的手动缩放：不允许缩放网页在 HTML 中指定视口信息：(移动端必备) <meta name="viewport" content="width=device-width,initial-scale...列偏移数量，每个列都可以指定向右偏移几列位置（不能用float）,偏移的列会影响后续的列,主要作用是列左右留白，列右对齐，列居中 A. .col-xs-offset-n :在 xs 下，当前列向右偏移...列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置 A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离 B、col-lg-pull-n...: 在 lg下，当前列向左移动n 列的距离 ⑦.

6K2 0

BFC 的形成和作用

grid items，即 display 的值为 grid 或 inline-grid 的元素的直接子元素（该子元素 display 不为 flex，grid，或 table）。...弹性格式化上下文（FFC，flex formatting context），在 CSS3 中定义。栅格格式化上下文（GFC，grid formatting context），在 CSS3 中定义。...BFC 包含内部的浮动（解决内部浮动元素导致的高度塌陷）。 BFC 排斥外部的浮动（触发 BFC 的元素不会和外部的浮动元素重叠）。外边距折叠的计算不能跨越 BFC 的边界。...各自创建了 BFC 的兄弟元素互不影响（注：在水平方向上多个浮动元素加一个或零个触发 BFC 的元素可以形成多列布局）。...通过 BFC 可以实现灵活健壮的自适应布局，在一行中达到类似 flexbox 的效果，示例如下：两栏自适应布局 1.gif 多列自适应布局 2.gif 参考资料块级格式化上下文包含块：MDN

2751 1

深挖 Threads App 帖子布局，我进一步加深了对CSS网格布局的理解

当我遇到一个新产品时，我首先想到的是他们如何实现CSS。当我遇到Meta的Threads时也不例外。我很快就探索了移动应用程序，并注意到我可以在网页上预览公共帖子。...使用CSS Grid进行帖子布局在生产应用程序中，CSS Grid的最显着的用例之一就是Threads。CSS Grid用于构建帖子布局。...我不知道为什么团队会选择这种方法，但我更喜欢使用gap属性。 为什么不使用命名的CSS网格区域呢？根据我目前观察到的情况，有三种网格布局变体，它们都可以受益于使用命名网格区域。...当选项卡数量增加时，我们只需要更改CSS变量的值。很简洁，对吧？溢出换行我注意到在帖子正文中使用了overflow-wrap: anywhere。我以前没有使用过或听说过这个关键词。...如果Threads团队中有任何人正在阅读这篇文章，我非常好奇为什么。动态视口单位的使用我喜欢在启动画面中使用动态视口单位dvh。

1702 0

译|CSS中的间距，前端开发中各种设置间距的优点缺点及实例

CSS网格中，可以使用 grid-gap 属性轻松在列和行之间添加间距。...按需定制我真正喜欢CSS Grid 的地方是 grid-gap 只在需要的时候才会被应用。考虑下面的模型。 ? 没有CSS网格，就不可能拥有这种灵活性。...在使用 :not 选择器之前不可能覆盖它。万一设计中有不止一列，它将无法正常工作。参见下图。 ? 关于解决方案2，它没有CSS特异性问题。但是，它只能处理一个列栈。...或者，当它垂直堆叠时在移动设备上将如何工作？很多很多的复杂性。...CSS数学函数：Min()，Max()，Clamp() 有可能有动态的边距吗?例如，根据视口宽度设置具有最小值和最大值的空白。答案是肯定的！我们可以。

12K1 0

CSS 中关于 Overflow ，你需要了解的这些知识点！

当left，right值中的一个将元素定位在body元素外部时，可能会发生这种情况 ? 要解决这个问题，首先需要检查为什么这个元素被放置在viewport之外。...grid 项目 CSS 网格有三种情况可以导致水平滚动，来看看它们。对列使用像素值 ? 当使用像素值时，这将在视口宽度较小时引起问题。...，只在有足够空间的视口上使用上面的列。...1fr)); grid-gap: 1rem; } 可能会遗忘要针对移动设备进行测试，因为最小宽度为300px，这将导致在某个点进行水平滚动。...一个简单的解决方法是将grid-template-columns重置为1fr，并在视口较大时对其进行更改。

4.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云