如果没有足够的空间，如何使网格minmax转到1列？
如果没有足够的空间，可以通过将网格布局的列数设置为1来实现网格minmax转到1列。在CSS中，可以使用grid-template-columns属性来定义网格布局的列。通过将grid-template-columns设置为repeat(1, minmax(0, 1fr))，可以将网格布局的列数设置为1，并且使用minmax(0, 1fr)来指定每列的最小和最大宽度为0和1fr（即平均分配剩余空间）。这样，即使空间不足，网格布局也会自动调整为1列。
以下是一个示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}在这个示例中，.grid-container是包含网格布局的容器元素的类名。通过将grid-template-columns设置为repeat(1, minmax(0, 1fr))，即可将网格布局的列数设置为1，并且每列的最小和最大宽度为0和1fr。
这种方法适用于需要在有限空间内显示网格布局，并且希望在空间不足时自动调整为1列的情况。例如，在移动设备上，如果屏幕宽度不足以容纳多列布局，可以使用这种方法将网格布局转换为单列布局，以确保内容的可读性和可访问性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
相关·内容
我有一种情况，这两列所在的容器的大小与视图端口的宽度不一致，所以我不能轻松地使用断点。我想知道如果没有足够的宽度，CSS网格中有没有什么东西会让一列从2列变成1列，就像CSS列一样(这就是我目前使用的，但它有一些奇怪的行为)。 display: grid;
grid-template-columns: minmax(200px, 400px
浏览 15提问于2020-07-30得票数 0
这是我的JS页面，在这里我需要实现GridList组件来显示多个块，并且在列表大小超过屏幕限制后可以水平滚动。
浏览 1提问于2021-10-16得票数 7
回答已采纳
考虑四列中的单词网格，每列都是相同的宽度。我大部分时间都可以用grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));得到这个，这些都是简短的单词。但是，可能有一个很长的词溢出了它的障碍：如果这是静态数据，我可以将网格css更改为grid-template-columns: repeat(auto-fill, minmax(33%, 1fr))
浏览 10提问于2022-06-26得票数 0
回答已采纳
2回答
我正在尝试创建一个有两行的CSS网格。我希望底部的行高固定为47px。这很简单。是第一排给我带来了麻烦。
我希望我的CSS网格的顶行是最小的250px高，即使行中没有内容。但如果内容在那里，我希望行的高度扩展到最大303px高。也就是说，只有当内容需要时，我才希望行的高度增加。从我看到的像grid-template-rows: minmax(250px, 303p
浏览 26提问于2018-08-21得票数 4
1回答
我正在尝试对CSS网格进行建模xx yy虽然屏幕至少有N个宽度，但我希望每个单元格占据宽度的50%，并在其间留出间隙。xxxx yyyy当屏幕达到某个最小宽度时，我希望网格堆叠在一起yz.grid { grid-template-columns，因为永远不会有足够的空间来容纳250%的
浏览 0提问于2020-08-20得票数 1
1回答
我面临着与CSS网格布局相关的minmax()函数的一些问题。这是我的代码：* {}
display: grid; <div>4</div> <div>6</div&
浏览 6提问于2016-12-17得票数 3
3回答
我已经设置了一个包含两个项目的网格。此网格可以包含任意数量的项目，但对于本例来说，两个项目就足够了。在该示例中，有两个灰色框左对齐。在宽屏幕(超过1000px)上使用检查器，我们可以发现第三个(或更多)“阴影”项，它填满了其余的空间。如何使方框在网格中居中？如“阴影”项不存在。在.grid元素上，我仍然希望使用网格，因为我不需要编写自动媒体查询。在包装器上，任何东西都可以。
此外，固定宽度也不是一种选
浏览 0提问于2018-03-27得票数 19
回答已采纳
我有一个NAV，它包含要显示的条件项。我使用CSS网格来构建它，使用网格模板区域。但是，当项目不可用时，它仍然为这些项目留出空间。我怎么才能避免。我不想在这些物品之间留出任何空间。注意:我知道我可以使用网格模板列，但是，我想知道是否有一种使用网格模板区域的方法。如果没有，我将使用网格模板列。.*{ box-sizing: border-box;nav{
浏览 3提问于2021-05-11得票数 0
1回答
嗨，我试着适应我的文本grif项目，但如果文本足够大，它会溢出出网格。如何使网格项高度灵活，并包含所有div文本
.grid{ grid-template-columns: minmax(0, 1fr) ;
background
浏览 2提问于2021-03-14得票数 0
回答已采纳
1回答
使用时：在网格内部，一切看起来都很完美。它创造了尽可能多的瓷砖可以容纳在这个空间。
当我向网格项添加一个grid-column: span 2时，一切正常工作，直到只有足够的空间容纳一个项为止。因为有了span 2，网格永远不会分解成一个列，并且创建一个具有以下项的难以置信的
浏览 2提问于2018-02-25得票数 5
1回答
无扩展响应网格
、、
我想要创建一个网格，尽可能多的元素，在它的宽度，但不拉伸网格元素，以适应100%的窗口。所以我在auto fill中使用css网格，这几乎是我想要的工作方式。我希望我的网格元素不要被拉伸来填充整个页面(因此它们具有静态宽度)，而是始终具有相同的宽度，如果网格元素没有足够的空间，请在右边填充一个空白(而不是拉伸它
浏览 3提问于2022-01-25得票数 0
2回答
我试图为minmax()设置grid-template-rows，有趣的是，结果是网格行扩展到minmax()的最大值，而不是min。如何使网格行保持最小声明大小，以及以后如果添加更多内容--网格行将扩展到声明的最大大小而不是更大？border: solid black 1px; grid-template-columns: 1fr 2fr 1fr;
gri
浏览 2提问于2018-06-02得票数 4
回答已采纳
2回答
我在Material UI中使用引导网格系统，一切都很好，只是一个问题，而且网格系统没有在任何填充或空白之后保留其槽空间，而是在没有足够的空间时将项转到下一行或行。正如您在这个例子中所看到的，每个按钮的网格大小为3，这意味着每行应该有4个按钮，但是由于只有一点填充和边距，所以每行都有3个按钮。我所期望的是，当应用边距和填充时，项目的宽度会自动变小，而不是转
浏览 1提问于2019-08-05得票数 1
回答已采纳
正如您在这个简单的例子中所看到的，每个网格单元总是使用最大可能的空间。为什么会发生这种情况，如果可能的话，我如何说服网格使用更少的空间？ display: grid; grid-auto-rows: minmax(
浏览 0提问于2018-08-05得票数 2
回答已采纳
有人能帮我解释一下为什么CSS网格调整-内容不起作用吗？对于本例，当我将列更改为100px时，justify-content起作用，但值stretch不起作用。CodeAcademy说：“我们可以使用justify-content沿着行轴定位整个网格。”整个网格是什么意思？这是网格容器中的所有项吗？
浏览 9提问于2020-10-15得票数 0
我这里有两个关于网格的问题。首先是在单元格中使用填充。二是网格间距固定。 我正在尝试创建4柱网格线。第一个和第二个单元格(青色、红色)在调整大小时应该消失，并且没有它们的空间。除了我在它们里面添加填充的时候。 有没有办法在调整窗口/屏幕大小时使填充消失？ 第二个问题是当我删除单元格的填充时。现在，网格间隙出现了一个问题。Grid-gap设置为1em，因此即使蓝绿色和红色单
浏览 17提问于2019-08-24得票数 1
回答已采纳
然而，DIV元素的内容是动态的，当行中断开始发生时，它看起来很混乱。
有没有办法阻止网格单元格(或div)扩展到空白区？
网格<
浏览 3提问于2020-01-09得票数 1
2回答
我认为这是一个简单的任务:给定x项，在网格中显示它们，每一列都是内容的宽度。如果列数超过容器的宽度，则创建新行并继续
我已经设法让列显示和包装，但前提是我为该列定义了固定宽度。当标签的数量超过可用的视图空间时，我如何使每行上的每个“标签”与内容相匹配，但移动到一个新的行？grid-template-columns: repeat(auto-fill,minmax(
浏览 0提问于2018-08-10得票数 5
1回答
如果网格元素与:empty伪类为空，我将试图隐藏它。.o-grid {}
width: 50%;}
有内容的正常元素。<div class="o-grid o-grid--half">
<div>Content<&
浏览 7提问于2022-10-02得票数 0
回答已采纳
如何使两个div相邻，当在不同大小的屏幕上(例如较小的屏幕)时，它们不会合并成一个，如果没有足够的空间向下转到下一行？如果可能的话，还可以缩小内部的元素(文本、图像和按钮)。
谢谢!当前有问题的页面(赠与框是dicvs )：
浏览 3提问于2015-10-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
