html - 应该如何在媒体查询断点处重新组织/分布 CSS 网格布局？

Question

我创建了一个 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;
}

这在桌面 View 中给我带来了零问题，但我现在需要跟进的是当视口(viewport)中断时，此时我正在使用 max-width:768px规则。所以，现在，一旦视口(viewport)达到最大宽度，任何 CSS Grid 命令似乎都没有效果或发生变化。我试过使用 grid-row 或 grid-row-start grid-column 或 grid-row-start但没有运气。

这是我的布局 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:

.head {
    grid-column: 1 / 4;
    text-align: center;
}

.col-menu {
    grid-column: 1;
    grid-row: 2 / 3;
}

.main-content {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}

.caption-object {
    grid-column: 3 / 4;
    grid-row: 3;
}

这是我第一次了解媒体查询和 CSS 网格，这意味着这是我第一次在媒体查询规则集中输入网格命令。我检查了如果我想更改 background-color: plum; 是否也会发生这种情况，它确实有效。我知道 repeat(minmax()) 但老实说我不知道​​如何正确地实现相同的外观或者它是否具有相同的“布局设计”因为那样我就必须删除网格行和列的位置？就像我说的，这是我第一次将 CSS Grid 与媒体查询一起使用，我附上了一些 pics ，谢谢!

最初我决定不包含它，因为似乎没有任何效果，所以我没有理由包含它。

@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;
    }

  }

媒体查询

Answer 1

为了回答我自己的问题，这就是我所做的，它可以在 MDN 上找到，必须检查“使用媒体查询重新定义网格”主题。

要重新组织 CSS 网格布局，必须设置媒体查询规则(在这种情况下，我使用的规则与 MDN 文件中的规则不同，但不知何故仍然有效)并且在那里我必须重新分配我的 grid-template-区域，也是我缺少的另一件事，我没有使用网格区域，我有像grid-row 或grid-columns 这样的东西。显然，当我们在我们的媒体查询代码中时，这似乎是一个重要的因素。他们确实注意到一件重要的事情，当使用网格区域时，应该在任何媒体查询命令之外分配它们以覆盖一个“行”或一个“列”，我猜测取决于您当前的 grid-auto-flow 命令，在定义列和行时默认设置为 row

所以，我的看起来像这样:

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

因为我没有在我以前的网格上定义任何区域，所以我永远不会让它按照我想要的方式工作。好吧，然后在 MQ 中，您尽可能地分配网格，但首先，您需要使用 grid-template-areas 使用 grid-template-columns 来重新分配区域和列，这取决于您的布局和元素大小，或者基本上取决于您对网格的想法。

所以我的媒体查询代码最终看起来像这样:

@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";
    }
}

重要:“.”是“空白”、“负空间”或“空单元格”。