無法使用媒體查詢將 1/6 css 網格調整為 2 /2 css 網格

Question

我正在構建一個應該具有的頁腳：

• 小屏幕上的 4x1 網格
• 中等屏幕上的 2x2 網格
• 最大屏幕上的 1x4 網格

我在小型和大型設計方面取得了成功，但是找不到改變中屏幕網格的方法。

我哪里錯了？

html如下：

<div class="parent">
    <b></b>
    <div class="intro">
        Some content goes here
    </div>
    <div class="col1">
        Some content goes here
    </div>
    <div class="col2">
        Some content goes here
    </div>
    <div class="col3">
        Some content goes here
    </div>
    <b></b>
</div>

我的 CSS 代碼如下：

.parent {
    display: grid;
    grid-template-rows: repeat(6, max-content);
    grid-template-areas:
                    '.'
                    'intro'
                    'col1'
                    'col2'
                    'col3'
                    '.';

    @media screen and (min-width: 400px) and (max-width: 599px) {
        grid-template-columns: 1fr 150px 150px 1fr;
        //grid-template-rows: auto auto;
        grid-template-areas:
                      '. intro col1 .'
                      '. col2  col3 .';
    }

    @media screen and (min-width: 600px) {
        grid-template-columns: 1fr repeat(4, minmax(50ch, 70ch)) 1fr;
        grid-template-areas: '. intro col1 col2 col3 .';
    }
}

Answer 1

似乎在這種特殊情況下，當具有空白區域的 1 行網格轉換為具有空白區域的 2 行網格時，必須明確地為子元素分配區域名稱。 否則內容將無法正常顯示。

.intro { grid-area: intro;}
.col1 { grid-area: col1;}
.col2 { grid-area: col2;}
.col3 { grid-area: col3;}