Chrome 小组非常期待在 。不过，我们认为在实施 CSS 网格规范时 如 最近的 WebKit 博文 则会出错。我们还认为，WebKit 博文反驳了 没人提议的砌块。
因此，这篇博文旨在解释 Chrome 团队为什么对 作为 CSS 网格布局规范的一部分来实施砌体， 替代提案可以实现的功能简而言之：
- Chrome 团队非常热衷于解决砌体问题，我们知道这 开发者所需的技术
- 向网格规范添加砌体 除了您是否认为砌体是否为网格之外，还有其他原因。
- 定义砌体 网格规范外的轨道不会导致系统阻止多个轨道大小， 或使用了对齐或间隙等属性， 网格布局中使用的地图项数量。
网格中应包含砌体吗？
Chrome 浏览器小组认为，砌体应该是一个单独的布局
方法，
使用 display: masonry 定义（或其他关键字应该更好名称）
）。在这篇博文的后面部分，您可以看看
代码的形式。
我们认为在外界更好地定义砌体工程，原因有两个相关 布局性能问题的可能性，以及 砌体和网格的特征在一种布局方法中都有意义， 另一个。
性能
就浏览器处理尺寸和 展示位置。在进行网格布局时，所有项均放置在布局之前，并且 浏览器可准确了解每个轨道中的内容。这使得复杂的固有特征 这在网格中非常有用使用砌体时，物品会按原样放置 浏览器并不知道每个轨道中有多少条。这不是 所有固有尺寸的轨道或所有固定尺寸的轨道都会出现问题，但如果您 混合固定曲目和固有曲目。要解决此问题，浏览器需要 执行一个布局前步骤，以各种可能的方式对每件商品进行布局 大网格，这将有助于提高布局性能 问题。
因此，如果您的砌体布局的轨迹定义为
grid-template-columns: 200px auto 200px 是网格中很常见的做法，
开始遇到问题将这些问题添加到
subgrids。
有一种观点是，大多数人不会遇到这种情况，但我们已经 人们确实拥有 网格。我们不想发货 有使用限制的信息，如果有其他替代方法， 方法。
我们如何处理在每种布局方法中都无意义的事情？
当 Flexbox 和 grid 成为 CSS 的一部分后，开发者常常认为， 行为不一致。他们遇到的不一致 因为长久以来，基于块布局，对布局如何工作都有假设。 随着时间的推移，开发者已经开始了解格式 上下文。当我们切换到网格或弹性格式环境时，会出现一些情况 行为有所不同。例如，您知道使用 Flexbox 时 因为 flexbox 是一维的。
将砌块捆绑成网格会破坏格式设置上下文和 对齐方式属性等功能 按格式设置上下文的对齐规范。
如果我们决定通过 混凝土中的固有和固定轨道定义非法，您将要 请记住，一种常见的网格布局模式并不适用于 砌体。
还有一些适用于砌体的模式，例如，
grid-template-columns: repeat(auto-fill, max-content)，因为您没有
但需要在网格中保持无效。以下是
属性列表，预期行为
会有所不同
或具有不同的有效值。
grid-template-areas：在 masonry 中，您只能指定 非砌体方向。grid-template：该简写形式需要考虑 所有差异。- 跟踪
grid-template-columns和 由于法律价值不同，因此grid-template-rows。 grid-auto-flow不适用于砌体，masonry-auto-flow不适用于网格。合并 会因为您使用的布局方法而导致- 网格有四个展示位置属性（
grid-column-start等）， 只有两个石工 - 网格可以使用
justify-*和align-*的所有六种元素 但 Masonry 只使用 Flexbox 等子集。
此外，您还需要指定所有新错误发生的情况
由开发者使用的值在带砌块的网格中无效而导致的情况
或网格无需砌体。例如，使用
grid-template-columns: masonry 或 grid-template-rows: masonry
但不能同时更改两者。如果您同时使用这两者，会出现什么情况？
必须指定这些详细信息
做同样的事情。
现在，从规范的角度来看， 这一切都变得复杂
。我们需要确保一切都考虑到砌体，
能否在砌体中发挥作用。从第一步开始，
开发者的视角为什么还要时刻谨记，尽管如此
在使用display: grid时，有些操作会因使用砌体功能而不起作用？
备选方案
如前所述，Chrome 浏览器小组希望 网格规范。这并不意味着它仅限于 具有相同列大小的简单布局方法。WebKit 中的所有演示 仍然可以发布。
经典砌体布局
提到砖石工，大多数人会认为 大小的列。可以使用以下 CSS 进行定义，该 CSS 需要 与捆绑的等效网格相比， version。
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
为不同的列宽使用网格类型的轨道大小
除了前面提到的固有轨道和固定轨道混合问题之外 因此您可以使用网格中您喜爱的所有曲目大小调整功能。例如 WebKit 博文中的示例， 一种窄的列和宽的重复列模式。
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
gap: 1rem;
}
针对砌体的其他轨道尺寸
有些其他的轨道大小选项，我们不允许在网格中使用，原因如下： 网格是一种二维布局方法。这些本可用于 但如果它们在网格中不起作用，就会让人感到困惑。
正在自动填充 max-content 个大小的轨道。
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, max-content);
gap: 1rem;
}
自动填充 auto 个大小的轨道，这将创建相同大小的轨道；
会自动调整尺寸以适应最大的尺寸。
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, auto);
gap: 1rem;
}
允许内容跨列，并将项目放置在砌体布局上
内容不得跨越多个柱子的独立砌体中
规范这可能会使用 masonry-track 属性，它是以下属性的简写形式：
masonry-track-start和masonry-track-end，因为您只有一个维度
在砌体布局中跨越多个元素
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, auto);
}
.span-2 {
masonry-track: span 2; /* spans two columns */
}
.placed {
masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}
采用砌体轨道的子砌体或次网格
这可通过单独的砌体规范加以支持，同样， 但不允许使用固有大小和固定大小的轨道。确切内容 都需要进行定义。我们不认为 工作。
总结
我们希望能够确定一个可以发货的规格。 可互操作。不过，我们希望以一种当前和未来都行得通的方式 让开发者可以放心地使用它。解决这一问题的唯一方法是 就会产生第二个问题，也就是 使网格的某些部分在砌体中非法 - 更糟糕的是。我们认为这不是一个好问题 尤其是在可以获得您期望的所有网格特征的情况下， 同时明确区分不同的内容
如果您有任何反馈，请通过以下链接参与讨论： 问题 9041。
感谢 Bramus、Tab Atkins-Bittner、Una Kravets、Ian Kilpatrick 和 Chris Harrelson ，了解对本博文的审核以及相关讨论内容。