使网格系统响应（左边一个，右边两个）

Question

我从安迪·霍夫曼 (Andy Hoffman) 回答的上一个问题中得到了这个网格系统。这是网格系统：

#showroom {
    display: grid;
    gap: 1rem;
    height: 250px;
}

#boxOne {
    grid-column: 1;
    grid-row: 1 / 3;
}

#boxTwo {
    grid-column: 2;
    grid-row: 1 / 2;
}

#boxThree {
    grid-column: 2;
    grid-row: 2 / 3;
}

#showroom > * {
    background-color: #444;
    padding: 20px;
    border-radius: 5px;
}

<div id="showroom">
    <div id="boxOne"></div>
    <div id="boxTwo"></div>
    <div id="boxThree"></div>
</div>

我的问题是如何使此网格系统在 750 像素 (@media screen and (max-width: 750px){}) 下响应。它在响应式版本中应该是这样的：

这个网格系统可以吗？

Answer 1

在媒体查询中，通过设置参数revert重置规则grid-column和grid-row。

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist).

#showroom {
    display: grid;
    gap: 1rem;
    height: 250px;
}

#boxOne {
    grid-column: 1;
    grid-row: 1 / 3;
}

#boxTwo {
    grid-column: 2;
    grid-row: 1 / 2;
}

#boxThree {
    grid-column: 2;
    grid-row: 2 / 3;
}

#showroom > * {
    background-color: #444;
    padding: 20px;
    border-radius: 5px;
}

@media (max-width: 750px) {
    #boxOne,
    #boxTwo,
    #boxThree {
        grid-column: revert;
        grid-row: revert;
    }
}

<div id="showroom">
    <div id="boxOne"></div>
    <div id="boxTwo"></div>
    <div id="boxThree"></div>
</div>

使网格系统响应（左边一个，右边两个）

Make Grid System Responsive (One on left and two on right)

html

css

grid

responsive