结构和合成是CSS中最具挑战性的主题。尤其是当您必须思量响应能力时。我们经常使用媒体查询的技术。可是，为种种断点添加许多媒体查询可能会使CSS无法维护。

可是，通过添加网格，我们可以克服媒体查询的疲劳。不仅使我们的CSS更易于维护，而且还改善了用户体验。

我们可以让CSS处置惩罚可用空间。在本文中，我将先容三种可以改善您（小我私家）网站的结构实现。动态居中结构我们都知道margin: 0 auto可以实现居中结构。

可是，如果您希望图像之类的元素凌驾文章的最大宽度怎么办？我们可以通过负margin实现。但这仅适用于大屏幕。在小屏幕上，负边距会破坏您的网站。

因此，我们必须添加许多媒体查询，以确保在所有屏幕尺寸上都能到达预期效果。可是现在，我们有了很酷的效果，如下图所示：article { display: grid; grid-template-columns: minmax(2rem, 1fr) minmax(auto, 65ch) minmax(2rem, 1fr);}/* Center all children */article > * { grid-column: 2;}/* Wider & centered images */article > img { grid-column: 1 / 4; justify-self: center; width: 100%; max-width: 100ch;}在较小的屏幕上，应该淘汰空间的浪费，而在较大的屏幕上，更多的填充可以改善视觉质量。可是使用上述解决方案，您仍然需要媒体查询。

我们可以更换2rem喜欢的工具calc(1rem + 1 * var(--ratio))。这样，当屏幕尺寸更改时，侧边填充会自动更改，而无需媒体查询。现在，我们的文章有了一个动态且可维护的结构。响应式多列网格系统通常使用Bootstrap网格系统或自己的实现来解决此问题。

可是，这将您限制为每种屏幕尺寸的牢固列数。如果您有五列，则在十二列系统中是不行能的。此外，您必须为每个元素确定列在差别屏幕尺寸上的跨度。幸运的是，这些天我们有了CSS网格。

对于CSS网格，我们没有为每个元素界说列跨度。相反，我们让浏览器确定屏幕上的列数。您可以使用下面的代码段实现所示的可扩展结构。

让我们剖解一下！.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%;}这就是所谓的RAM模式：重复，自动，最小最大。使用minmax(20rem, 1fr)，每列的最小宽度为20rem，但会在较大的屏幕上缩放。通过auto-fill，我们让浏览器确定屏幕上可用列的数量。使用auto-fill和minmax(20rem, 1fr)在90rem浏览器的屏幕上时，将建立四列。

当只有两个元素要放入网格时，auto-fit将列数淘汰到两列。这使您在响应式结构中具有极大的灵活性，而无需使用媒体查询。双向卡结构您经常会看到大的卡片结构，其中的图像和内容相互相邻，横跨很大的水平空间。

通常它们之间具有牢固比率（例如50％-50％）。减小屏幕尺寸时，酿成相互叠放。.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); width: 100%; grid-template-rows: auto 1fr;}它险些与上一个结构相同。

不外我们需要添加grid-template-rows: auto 1fr到grid类示例中。该auto值以改变的比例适应垂直偏向。

本文来源：爱游戏app官方下载-www.zhongzhixitong.com