如何使用 CSS 网格实现响应式布局答案

【问题标题】：How to implement responssive layout using css grid如何使用 CSS 网格实现响应式布局
【发布时间】：2020-01-22 08:17:21
【问题描述】：

我想使用响应式 CSS 网格实现图 1 中的布局。
元素A、B、C、D、E——内容不同（内容与下图中的框大小成正比）

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

我尝试使用重复、自动填充和适合内容来定义网格模板列，但我没有得到想要的结果我遇到了this 链接，它解释了这一点

“自动重复（自动填充或自动适应）不能与内在或灵活的尺寸（例如 fit-content）”

我还尝试定义具有重复、固定宽度的网格模板列，并将跨度分配给元素：例如"grid-column: 1 / span 3;" 这也没有给出想要的结果。

是否可以使用 css 网格来实现这样的布局？
如果没有，实现它的最简单方法是什么（嵌套css网格？，flexbox和css网格的组合？）

谢谢

【问题讨论】：

你能展示真实的布局吗？还是只有这些方案？

标签： css-grid

【解决方案1】：

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

使用 CSS Grid，您可以为网格区域指定实际名称并将特定元素分配给特定区域，然后使用 @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 Grid

注意：Internet Explorer 不支持 grid-area，但您可以使用 AutoPrefixer 来解决此问题。

【讨论】：