食谱：媒体对象

媒体对象模式需要以下一些或所有特征

• 在移动设备上堆叠，在桌面设备上为两列。
• 图像可以在左侧或右侧。
• 图像可能很小或很大。
• 媒体对象可以嵌套。
• 无论哪一侧最高，媒体对象都应该清除内容。

我选择使用网格布局作为媒体对象，因为它允许我在需要时控制二维布局。这意味着当我们有一个页脚，上面有简短的内容时，页脚可以被推到媒体对象的底部。

使用网格布局的另一个原因是为了能够使用fit-content 来设置图像的轨道大小。通过使用fit-content，最大尺寸为 200 像素，当我们有一个像图标一样的小图像时，轨道只会变得和该图像一样大——max-content 大小。如果图像更大，轨道会在 200 像素处停止增长，并且由于图像已应用了 max-width 的 100%，它会缩小以继续适合列内。

通过使用 grid-template-areas 来实现布局，我可以看到 CSS 中的模式。我在最大宽度为 500 像素时定义网格，因此在更小的设备上，媒体对象会堆叠。

该模式的一个选项是将其翻转以将图像切换到另一侧——这是通过添加media-flip 类来完成的，该类定义了一个翻转的网格模板，导致布局被镜像。

当我们将一个媒体对象嵌套到另一个媒体对象中时，我们需要将其放置在常规布局中的第二个轨道中，在翻转时放置在第一个轨道中。

• fit-content 属性
• 使用网格模板区域
• CSS 网格布局 模块