CSS网格自动适合最大内容 [英] CSS Grid auto fit with max-content
问题描述
我有4栏.第1列和第4列的实际内容为150像素,第2列为250像素,第3列为370像素.我想在浏览器宽度改变时换行.当我减小浏览器的宽度时,我希望每列在包装前缩小到其最小宽度.因此,我认为第4列在低于150px宽度后将以100%的宽度下降到下一行.
I have 4 columns. The actual content for columns 1 and 4 is 150px, column 2 is 250px and column 3 is 370px. I want to wrap the columns when the browser width changes. When I decrease the width of the browser, I want each column to shrink down to their lowest width before wrapping. So I imagine the 4th column would fall to the next row with a 100% width after it fell below 150px width.
这是我认为应该完成的窍门:
Here's what I thought should've done the trick:
repeat(auto-fit, minmax(max-content, 1fr))
有没有一种方法可以在不传递最大内容"为固定宽度的情况下实现这一目标?
Is there a way to achieve this without passing a fixed width where 'max-content' is?
这是我使用媒体查询和固定宽度的解决方案
Here's my solution using media queries and hard widths
https://jsfiddle.net/9hjb5qv8/
这是我在上面的小提琴中使用的html/css:
Here's the html/css I used in the fiddle above:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
grid-gap: 8px;
}
@media (max-width: 799px) {
.container {
grid-template-columns: minmax(max-content, 1fr);
}
}
@media (min-width: 800px) {
.container .p2,
.container .p3 {
grid-column: auto / span 2;
}
}
.container > div {
background-color: gray;
text-align: center;
}
<div class="container">
<div class="p1">
<img src="https://via.placeholder.com/150x150">
</div>
<div class="p2">
<img src="https://via.placeholder.com/250x150">
</div>
<div class="p3">
<img src="https://via.placeholder.com/370x150">
</div>
<div class="p4">
<img src="https://via.placeholder.com/150x150">
</div>
</div>
推荐答案
在处理网格时,我有一个类似的问题:
I had a similar question when playing around with grid:
grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr))
如果我们看一下文档,我们会发现minmax
命令是有效的:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/minmax
If we take a look at the documentation we can see that minmax
command is valid:
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
但是在有关csswg的重复文档中,它陈述了一个简单的规则,不允许所有这些事情发生; https://drafts.csswg.org/css-grid/#funcdef-repeat
But in a repeat documentation on csswg, it states one simple rule that disallows all of this from happening; https://drafts.csswg.org/css-grid/#funcdef-repeat
repeat()语法的通用形式大约是
The generic form of the repeat() syntax is, approximately,
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
第一个参数指定重复次数.第二 参数是一个跟踪列表,重复该次数.
The first argument specifies the number of repetitions. The second argument is a track list, which is repeated that number of times.
但是,有一些限制:
-
repeat()表示法不能嵌套.
The repeat() notation can’t be nested.
自动重复(自动填充或自动调整)不能与 固有尺寸或灵活尺寸.
Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.
什么是固有尺寸或灵活尺寸?
Whats an intrinsic or flexible sizes ?
- 内部大小调整函数(
min-content
,max-content
,auto
,fit-content()
).
- An intrinsic sizing function (
min-content
,max-content
,auto
,fit-content()
).
因此该命令将无法在网格中使用,因为每列/行的大小都会不同,并且无法进行换行.参见下面的图片.
So the command wont work in grid because each column/row will be different sizes and wrapping cannot take place. See bellow picture as example.
此行为应改为使用flex-box来执行.
This behavior should be executed using flex-box instead.
这篇关于CSS网格自动适合最大内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!