移动端将网格转为单列列表遇问题：双列显示+中间元素未隐藏

我做了一个菜单网格，中间包含大文本元素，其余菜单选项环绕排列。希望在移动端（窗口宽度≤768px）将其转为单列网格，同时隐藏中间的大文本。目前已编写max-width:768px的媒体查询，设置grid-template-columns为100%，但窗口宽度小于768px时却显示双列，且不知道如何隐藏中间文本。

现有代码 #

容器CSS样式 #

.container {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 25% 25% 25% 25%;
    gap: 30px;
    align-items: center;
}

中间大元素CSS样式 #

.kozepe {
    grid-area: 2 / 2 / 4 / 3;
    margin:auto;
    display:block;
    text-align: center;
}

媒体查询代码 #

@media (max-width: 768px) {
    .container {
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: auto;
    }
}

网格项通用样式及HTML结构 #

.item {
    font-family: "Freeman", sans-serif;
    font-weight: 800;
    font-size: 2rem;
    display: block;
    text-decoration: none;
    color: black;
}

<body>
    <div class="flex">
        <div class="container">
            <a href="zene.html" style="text-decoration:none;" class="item "><div>Zene</div></a>
            <a href="gta.html" style="text-decoration:none;" class="item kozep"><div>Grand Theft Auto</div></a>
            <a href="gitár.html" style="text-decoration:none;" class="item"><div>Gitár</div></a>
            <a href="számítógép.html" style="text-decoration:none;" class="item"><div>Számítógép</div></a>
            <a href="kozep.html" style="text-decoration:none;" class="item kozepe"><div>Nézd meg ezt csináltam ma jujj de örülök neki!!!</div></a>
            <a href="fotózás.html" style="text-decoration:none;" class="item"><div>Fotózás</div></a>
            <a href="útjaim.html" style="text-decoration:none;" class="item"><div>Útjaim</div></a>
            <a href="sport.html" style="text-decoration:none;" class="item"><div>Sport</div></a>
            <a href="képesítéseim.html" style="text-decoration:none;" class="item"><div>Képesítéseim</div></a>
            <a href="hobbijaim.html" style="text-decoration:none;" class="item kozep"><div>Hobbijaim</div></a>
            <a href="valami.html" style="text-decoration:none;" class="item"><div>Valami</div></a>
        </div>
    </div>
</div>
</body>

1. 修复移动端双列问题 #

双列问题是因为.kozepe元素的grid-area属性强制占据了网格区域，导致其他项布局错乱。需要在媒体查询中重置该属性，让所有网格项自动填充单列：

@media (max-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    /* 重置grid-area，让元素回到正常布局流 */
    .kozepe {
        grid-area: auto;
    }
}

2. 隐藏中间大文本 #

直接在媒体查询中给.kozepe添加display: none即可隐藏该元素，最终媒体查询代码如下：

@media (max-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }
    /* 隐藏中间大文本元素 */
    .kozepe {
        display: none;
    }
}

额外优化建议 #

• 修正HTML结构：代码中多了一个多余的</div>（.container闭合后额外添加的），建议删除，避免布局异常。
• 调整移动端字体：2rem的字体在移动端可能过大，可在媒体查询中设置.item的font-size: 1.5rem，提升移动端可读性。

内容的提问来源于stack exchange，提问作者Roland Boros