Html 如何在媒体查询断点处重新组织/重新分发CSS网格布局？

我制作了一个网格布局，由3列宽3行高组成：

.home-works {
    padding: 30px;
    font-size: 1.2rem;

    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 4fr 4fr;

    grid-gap: 10px;
}

这在桌面视图中不会给我带来任何问题，但我现在需要跟进的是，当视图端口中断时，此时我正在使用

max width:768px

规则。因此，现在，一旦视图端口断开到最大宽度，任何CSS网格命令似乎都不会产生效果或改变。我尝试过使用

网格行

或

网格行开始

网格列

或

网格行开始

，但没有成功

这是我的布局HTML：

<div class="home-works">
                <div class="head">
                    <h1>Let's stay connected!</h1>
                </div>
                <div class="col-menu">
                        <img class="image-home" src="img/profile-picture.png" width="50%">
                    <ul>
                        <li>home</li>
                        <li>about</li>
                        <li>contact</li>
                        <li>downloads</li>
                    </ul>
                </div>
                <div class="main-content">
                        <p>This is my website and I call it, the <em>"glassless window"</em>
                            Why? Because using the frame on your device (mobile, desktop or laptop) 
                            we are allowed to establish a connection thus enabling me to show you my
                            up and coming projects. </p>
                </div>
                        <div class="caption-object">
                                <p>I really wish you could <a class="drop-a-line-link" href="#">drop me a line</a> somewhere
                                    in the future!</p>
                        </div>
            </div>

这是我第一次讨论媒体查询和CSS网格，这意味着这是我第一次在媒体查询规则集中输入网格命令。我检查了一下，如果我想更改

背景色：梅花，这是否也会发生，它确实起作用了。我知道重复（minmax（））

，但老实说，我不知道如何正确实现相同的外观，或者它是否具有相同的“布局设计”，因为这样我就必须删除网格行和列的位置？就像我说的，这是我第一次在媒体查询中使用CSS网格，我附上了一些，谢谢

起初，我决定不包括它，因为似乎没有什么工作，所以我没有理由包括它

@media only screen and (max-width: 768px) {
    .nav-items {
      flex-direction: column;
      align-items: center;
    }
    .navbar {
        height: 200px;
        padding-bottom: 20px;
    }
    .footer-link {
        align-self: center;
        left: 0;
        top: 0;
    }
    .main-container {
        flex-flow: column wrap;
        margin: 0 10px;
    }
    .drop-a-line-link {
        text-decoration: underline wavy;
    }

  }

---

媒体查询

要回答我自己的问题，这就是我所做的，并且可以在上找到，必须选中“使用媒体查询重新定义网格”主题

要重新组织CSS网格布局，必须设置媒体查询规则（在本例中，我的规则与MDN归档不同，但不知何故仍然有效），并且在这里，我必须重新分配我的

网格模板区域

，这也是我缺少的另一件事，我没有使用网格区域，我有像

网格行

或

网格列

这样的东西。显然，当我们在媒体查询代码中时，这似乎是一个巨大的因素。在使用网格区域时，它们需要注意的一点同样重要，那就是在任何媒体查询命令之外，应该将它们分配为只覆盖一行或一列，我想这取决于当前的

网格自动流动

命令，该命令在定义列和行时默认设置为行

所以，我的是这样的：

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(350px, auto);
    grid-template-areas: 
    "header"
    "menu"
    "main"
    "caption";

@media (min-width: 500px) {
    .home-works {
        grid-template-columns: 2fr 2fr 2fr;

        grid-template-areas: 
        "header header menu"
        ".      main main"
        ". .    caption";
    }
}

@media (min-width:700px) {
    .home-works {
        grid-template-areas:
        "header header header"
        "menu main main"
        ". .  caption";
    }
}

因为我没有在我以前的网格上定义任何区域，所以我永远也不会让它按照我想要的方式工作。好的，然后在MQ中，您尽可能地分配网格，但是首先，您需要使用

网格模板区域

重新分配区域，以及您的列，使用

网格模板列

，这取决于您的布局和项目大小，或者基本上取决于您对网格的想法

因此，我的媒体查询代码最终如下所示：

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(350px, auto);
    grid-template-areas: 
    "header"
    "menu"
    "main"
    "caption";

@media (min-width: 500px) {
    .home-works {
        grid-template-columns: 2fr 2fr 2fr;

        grid-template-areas: 
        "header header menu"
        ".      main main"
        ". .    caption";
    }
}

@media (min-width:700px) {
    .home-works {
        grid-template-areas:
        "header header header"
        "menu main main"
        ". .  caption";
    }
}

---

重要提示：“.”是“空白”或“负空白”或“空单元格”。

要回答我自己的问题，这就是我所做的，并且可以在上找到，必须选中“使用媒体查询重新定义网格”主题

要重新组织CSS网格布局，必须设置媒体查询规则（在本例中，我的规则与MDN归档不同，但不知何故仍然有效），并且在这里，我必须重新分配我的

网格模板区域

，这也是我缺少的另一件事，我没有使用网格区域，我有像

网格行

或

网格列

这样的东西。显然，当我们在媒体查询代码中时，这似乎是一个巨大的因素。在使用网格区域时，它们需要注意的一点同样重要，那就是在任何媒体查询命令之外，应该将它们分配为只覆盖一行或一列，我想这取决于当前的

网格自动流动

命令，该命令在定义列和行时默认设置为行

所以，我的是这样的：

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(350px, auto);
    grid-template-areas: 
    "header"
    "menu"
    "main"
    "caption";

@media (min-width: 500px) {
    .home-works {
        grid-template-columns: 2fr 2fr 2fr;

        grid-template-areas: 
        "header header menu"
        ".      main main"
        ". .    caption";
    }
}

@media (min-width:700px) {
    .home-works {
        grid-template-areas:
        "header header header"
        "menu main main"
        ". .  caption";
    }
}

因为我没有在我以前的网格上定义任何区域，所以我永远也不会让它按照我想要的方式工作。好的，然后在MQ中，您尽可能地分配网格，但是首先，您需要使用

网格模板区域

重新分配区域，以及您的列，使用

网格模板列

，这取决于您的布局和项目大小，或者基本上取决于您对网格的想法

因此，我的媒体查询代码最终如下所示：

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(350px, auto);
    grid-template-areas: 
    "header"
    "menu"
    "main"
    "caption";

@media (min-width: 500px) {
    .home-works {
        grid-template-columns: 2fr 2fr 2fr;

        grid-template-areas: 
        "header header menu"
        ".      main main"
        ". .    caption";
    }
}

@media (min-width:700px) {
    .home-works {
        grid-template-areas:
        "header header header"
        "menu main main"
        ". .  caption";
    }
}

---

重要提示：“.”是“空白”、“负空格”或“空单元格”。

我在你的CSS中没有看到任何媒体查询。它现在在那里。我在你的CSS中没有看到任何媒体查询。它现在在那里。