css grid 自动高度_现代CSS网格解决常见布局问题的方法

布局和合成是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值以改变的比例适应垂直方向。