如何利用css网格实现响应式布局

Question

我希望使用响应性的css网格在figure1中实现布局。

元素A，B，C，D，E-有不同的内容(内容与下图中的方框大小成正比)

每个元素框的大小应该根据我试图避免硬@媒体声明的内容来设置

我试图定义具有重复、自动填充和适配内容的网格模板列，但我没有得到想要的结果--我遇到了解释如下的这链接

自动重复(自动填充或自动填充)不能与固有的或灵活的大小(例如，fit内容)结合在一起。

我还试图定义重复、固定宽度的网格模板列，并将span分配给元素:例如，"grid-column: 1/ span 3“，这也无法给出所需的结果。

是否可以使用css网格来实现这样的布局？

如果不是，实现它的最简单方法是什么(嵌套css网格？，柔性盒和css网格的结合？)？

谢谢

​

​

Answer 1

就我个人而言，我将使用一系列嵌套的CSS网格，并使用CSS支持的grid-area。然后使用@media查询更改较小视图上的网格布局。

使用CSS，您可以指定网格区域的实际名称，并将特定元素分配到特定区域，然后使用@media查询，您只需移动区域，页面大小调整时内容就会自动移动。

.my-grid {
    display: -ms-grid;
    display: grid;
        grid-template-areas: "area1 area2" "area3 area2";
}

.my-grid-item-a1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: area1;
}

.my-grid-item-a2 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 2;
    grid-area: area2;
}

.my-grid-item-a3 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: area3;
}

上面的代码将生成这个网格：

​

您需要的所有东西都可以在这里找到：CSS-Tricks CSS网格

注意: Internet不支持grid-area，但是您可以使用AutoPrefixer来解决这个问题。