对于CSS网格，当使用grid-auto-flow: column时，有没有一种方法来包装隐式网格？
对于CSS网格，当使用grid-auto-flow: column时，可以使用grid-auto-flow: dense来包装隐式网格。
grid-auto-flow: dense是一个CSS属性，用于指定如何填充隐式网格。当设置为dense时，浏览器会尽可能地填充网格，即使这意味着项目之间会有空隙。这种方式可以确保网格中的项目紧密排列，最大化利用空间。
使用grid-auto-flow: dense可以解决当使用grid-auto-flow: column时，项目数量不足以填满整个网格时出现的空隙问题。它会自动将项目填充到空隙中，使得网格更加紧凑。
在实际应用中，grid-auto-flow: dense可以用于各种场景，例如展示图片墙、瀑布流布局等。通过紧凑排列项目，可以提升页面的美观性和用户体验。
腾讯云相关产品中，与CSS网格相关的产品为腾讯云CDN加速服务。腾讯云CDN加速服务可以加速网站的静态资源加载，提升网站的访问速度和用户体验。具体产品介绍和使用方法可以参考腾讯云官方文档：https://cloud.tencent.com/product/cdn
相关·内容
我正在尝试实现一个4x2网格的布局，它(使用grid-auto-flow: column)流入下面的第二个4x2网格。本质上，我试图将一个8x2的网格切成两半，并将这两半放在另一半的上面。有没有办法让这个布局自己包装起来？}
有没有办法让我把隐式网格包裹到底部，而不是把它撞到网格的右边？(现在我
浏览 5提问于2017-12-05得票数 4
2回答
我试图使用隐式CSS网格为以下基本HTML结构生成布局： <textarea></textarea></div>.row { grid-auto-
浏览 1提问于2020-02-02得票数 0
1回答
我正在研究grid-auto-flow上的MDN 提供的示例，以了解CSS网格中的自动布局算法是如何工作的。网格按以下顺序放置条目：
如果我们先放置项，然后在选项设置为行的情况下，为什么不显式地将项4(红色)放置在第一行和第二列中？为什么将蓝
浏览 23提问于2020-10-04得票数 3
回答已采纳
你好，我正在做一个网站插件，我有一些问题，使用css网格显示这些帖子。这是一个使用媒体查询更改网格模板列的简单方法。检查人员说，我的媒体查询是活动的，但模板列中的实际更改没有呈现。这是网址url：.post_holder { grid-template-columns: auto auto auto;}
我总是使
浏览 3提问于2021-01-26得票数 0
回答已采纳
1回答
我正在使用行来练习自动填充属性，但是它并没有做我想做的事情。我想要创建具有高度minmax(140px, 200px)的行，但是得到一个高度为200 to的行，其余的行为18 to。
浏览 0提问于2019-04-23得票数 4
回答已采纳
我的问题是，我希望我的元素按列方向流动：[2][4].selector { grid-template-columns: 1fr1fr: grid-auto-flow: column;现在，如果有更多的元素，我希望它自动生成更多的行，如下所示：[2][5]但是，网格生成了更多的列，如下所示：[2][4][6]
如果我能说
浏览 3提问于2020-01-30得票数 2
回答已采纳
1回答
如何使列的组件垂直对齐
、、、
默认情况下，每个元素占用的空间与其内容使用的空间相同但是所有的要素都应该是一致的。所以所有的标题，描述和按钮都应该从同样的高度开始。
我觉得在这里，flexbox可能帮不上什么忙，但CSS网格可能会或者可能使用display: table，并在这样的结构中将所有东西都交给我，但遗憾的是，我无法让它工作起来。
浏览 1提问于2022-08-27得票数 0
回答已采纳
是什么让他们最初表现得像这样？什么属性，这里发生了什么？.wrapper { background-color: rgb(32, 156, 88);}
background-color: rgb(226, 228, 131);} <div>One</div>
<div>Two</di
浏览 5提问于2022-07-10得票数 0
1回答
CSS网格与变换的结合
、、、
有没有办法将CSS网格与转换结合起来，在网格布局中移动div？例如，如果用户单击Box B(它将扩展到占用当前由它自己和方框C和F所持有的空间)，我如何使用转换将C和F从新占用的空间中移出，进入网格中当前无人占用的空间？
浏览 3提问于2017-07-03得票数 10
回答已采纳
2回答
我正在尝试创建一个有序的多列列表，但我正在努力处理CSS网格布局规则。 grid-template-rows: repeat(5, 1em); outline: 1px solid orange;<ol> <li>Item 13</li>
<
浏览 0提问于2017-07-02得票数 9
1回答
我有一组通过CSS Grid布局尽可能“自动”排列的div磁贴；我的最后一个想法是，即使我不知道有多少磁贴，它们的大小和位置都是正确的。这工作得很好。grid-row: span 2;如果我点击任何不在最右边列的磁贴，我都会对结果感到满意。当最右边的瓦片被展开时，它们会被包裹到下一行。 console.
浏览 1提问于2017-07-10得票数 10
回答已采纳
3回答
当在相应的父div中定义grid-template-columns时，这很好。那么，如果我要使用这个，网格是否有最小的fr单位？继续往前走，你会看到第二列不再是700px。: 1; height: 40px;}
display: inline-block;}
grid-column-start: 1;
grid-<
浏览 0提问于2019-03-15得票数 3
1回答
理解网格负值
、、
我试着做一个网格，在底部有一个全跨度的行。对于单跨列，我可以使用grid-column: 1/1。对于单跨行，我可以使用grid-row: 1/1。为什么第一列/行的语法与1/1不一样？, 2fr) 1f
浏览 2提问于2019-07-30得票数 7
回答已采纳
1回答
对于这个特殊的例子，我有3个，如下所示：我希望前2名保持在他们的位置，第3名一直在右边。我唯一能够弄清楚如何做到这一点的方法是在链接上设置一个宽度，比如：grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));，然后在我想要的元素末尾添加以下内容：grid-column-end我希望宽度设置为auto，但是我没有一个覆盖整个宽度的隐式网格，因此似乎不能将第三个链接放在导航栏的最右边。有什么相对简单的方法可以用CSS</e
浏览 1提问于2018-03-25得票数 1
回答已采纳
2回答
我希望每个按钮保持其唯一的宽度(目前基于文本宽度)，并使按钮自动放置在下一行时，没有更多的空间水平。
使用grid-auto-flow: column允许按钮保留其宽度，但是它们不会包装。使用grid-template-columns: repeat(auto-fill, minmax(1rem, 15rem))允许它们包装，但是它们会失去各自的宽度。grid-template-columns: repeat(auto-fill, minmax(1rem, 11.3re
浏览 1提问于2020-05-12得票数 5
回答已采纳
5回答
我有一些网格，我可以通过flexform选择列宽(33.3% - 33.3% - 33.3%或25% - 50% - 25%，…)或者，计算网格列的最大图像宽度的解决方案是什么？
浏览 0提问于2016-09-07得票数 0
8回答
我希望使用CSS Grid来逆转两个并排div的明显顺序，其中一个div任意增长(我不想使用浮点数)。}
background: yellow; background: blue;}
grid-column: 1; grid-column: 2; grid-column</e
浏览 1提问于2017-07-28得票数 71
回答已采纳
如果我有一个自动流列的网格 grid-auto-flow: column;我如何说“我希望所有列都是内容的最小大小，最后一列填充所有可用的空间我知道，在简单的情况下，这是可以通过flexbox实现的，我正试图具体地增强我的网格知识。
浏览 2提问于2019-10-20得票数 3
1回答
我是CSS和摆弄网格的新手，但我很难找到一种合理的方法来创建一个有两行两列的网格，其中： 左上角单元格:按钮和文本开始右上角单元格:图片左下角单元格:文本继续右下角单元格:文本继续 .row {display: grid; grid-template-rows: auto; .button {
text-align: cente
浏览 18提问于2021-10-08得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
