为什么最小内容不能与自动填充或自动调整一起使用? [英] Why doesn't min-content work with auto-fill or auto-fit?

问题描述

基本上，我不明白为什么会这样:

Basically, I do not understand why this works:

.grid {
  display: grid;
  grid-template-columns: repeat(4, min-content);
}

但这不起作用:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, min-content);
}

我真的希望使后一种功能成为可能.还有其他方法可以使其正常工作吗?

I really wish to make the latter functionality possible. Are there other ways to make it work?

推荐答案

第二条规则不起作用，因为min-content是固有的大小调整功能.

The second rule doesn't work because min-content is an intrinsic sizing function.

§ 7.2.2.1.的语法 repeat()

§ 7.2.2.1. Syntax of repeat()

• 自动重复(auto-fill或auto-fit)不能合并 尺寸为固有或灵活.

• Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

§ 11.网格 调整大小

§ 11. Grid Sizing

• 固有大小函数(min-content，max-content，auto， fit-content()).

• An intrinsic sizing function (min-content, max-content, auto, fit-content()).

灵活的大小调整功能[是带有fr单位].

A flexible sizing function [is a dimension with the fr unit].

这篇关于为什么最小内容不能与自动填充或自动调整一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！