如何在屏幕宽度小于1180px时用CSS Grid移除指定HTML div？

要实现屏幕宽度低于1180px时隐藏grid-item-2、grid-item-4、grid-item-6这几个元素，必须使用媒体查询——CSS Grid只是布局系统，本身没有基于视口宽度的条件触发能力，无法单独完成响应式的元素显示/隐藏逻辑。

你可以通过在CSS中添加媒体查询，针对目标元素设置display: none来实现需求；如果需要优化隐藏元素后的网格布局，也可以在媒体查询内同步调整Grid的列配置：

body {
    margin: 0; padding: 0;
    width: 100%;
}

#grid-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 10rem);
    grid-gap: 1px;
}

.grid-item {
    background: black;
}

.grid-item-2 {
    background: red;
}

.grid-item-4 {
    background: green;
}

.grid-item-6 {
    background: blue;
}

.grid-item-8 {
    background: yellow;
}

/* 媒体查询：屏幕宽度≤1179px时生效 */
@media (max-width: 1179px) {
    .grid-item-2,
    .grid-item-4,
    .grid-item-6 {
        display: none;
    }
    /* 可选：调整网格列数，让剩余元素填满布局 */
    #grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

修改后，当屏幕宽度低于1180px时，指定的三个元素会被从布局中移除；若开启可选的列数调整，剩余元素会自动重新排列填满3列网格空间。

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