如何解决如何用另一列@media溢出网格列
我在grid-template-areas: "a a" "b c"
中有2行2列。当屏幕宽度小于某个值(例如1100px)时,我试图用列c溢出B列,但是当我更改浏览器大小时,列c开始用尽屏幕,而不是浮动在列b上方。 grid-template-columns: auto 230px
; grid template-rows: 56px auto
;。
整个网站看起来像这样:https://jsfiddle.net/a5gb0c7p/
列“ elem1”,“ elem2”和“ child2”具有预定义的大小。 “ child top”和“ child1”是自动的,但是“ child1”是显示电子邮件的列,因此它将在某些时候计算出宽度。
TLDR:在调整大小时,我希望在Web宽度小于某个值时将c列浮在b列上方(在代码编辑器中:将“ child2”浮于“ child1”上方)
解决方法
如果我认为我对您的理解正确,那么您是否希望网格在一定的屏幕宽度上改变?
这会是您所追求的效果吗? https://jsfiddle.net/jimmythehat/x548ewf9/5/
当浏览器的像素低于800px时,媒体查询将触发并更改网格结构。
以下代码:
.parent2 {
display: grid;
grid-template-columns: auto 230px;
grid-template-rows: 56px auto;
grid-template-areas: "child0 child0"
"child1 child2";
background: orange;
border: 5px dotted blue;
}
@media (max-width:800px) {
.parent2 {
grid-template-columns: auto;
grid-template-areas: "child0"
"child2"
"child1";
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。