媒体查询和使网格系统响应

Question

我对媒体查询很熟悉，但是当涉及到不同大小和形状的多个div时，我完全丢失了。所以，如果有人愿意带我走过这个过程，那将是美好的。或者只是给我一些指点，这就是我真正要求的！现在我有7个独立的div，全部定位我想要的，只是不知道如何保持它响应不同的设备。

.wrapper { 
 
    max-width: 900px; 
 
    margin: 0 auto; 
 
} 
 

 
.wrapper > div { 
 
    background-color: lightcoral; 
 
    padding: 1em; 
 
    color: white; 
 
    
 
}.wrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(3, 1fr); 
 
    grid-gap: 15px; 
 
    grid-auto-rows: minmax(100px, auto); 
 
} 
 

 
.one { 
 
    grid-column: 1; 
 
    grid-row: 1; 
 

 
} 
 

 
.one:hover { 
 
    opacity: .6; 
 
} 
 

 

 
.two:hover { 
 
    opacity: .6; 
 
} 
 
.three:hover { 
 
    opacity: .6; 
 
} 
 
.two { 
 
    grid-column: 2; 
 
    grid-row: 1 /3; 
 
} 
 

 
.two:hover { 
 
    opacity: .6; 
 
} 
 

 
.three { 
 
    grid-column: 1; 
 
    grid-row: 2 /3; 
 
} 
 
.four { 
 
    grid-column: 3; 
 
    grid-row: 1/4; 
 
} 
 
.five { 
 
    grid-column: 1 /3; 
 
    grid-row: 3; 
 
} 
 
.six { 
 
    grid-column: 2/4; 
 
    grid-row: 4 ; 
 
} 
 
.seven { 
 
    grid-column: 1; 
 
}

<div class="wrapper"> 
 
<div onclick="location.href='http://www.google.com';" style="cursor: pointer;" class="one"><div class="oneimage"></div><div class="onetext">Title here</div></div> 
 
<div onclick="location.href='http://www.google.com';" style="cursor: pointer;" class="two">Title here</div> 
 
    <div class="three">Three</div> 
 
    <div class="four">Four</div> 
 
    <div class="five">Five</div> 
 
    <div class="six">Six</div> 
 
    <div class="seven">Seven</div> 
 

 

 
     </div>

谢谢你给谁决定帮助我提前！

Answer 1

@media only screen and (max-width: 768px) { 
.wrapper { 
    display: block; 
} 
.margin-bot { 
    margin-bottom: 2px; 
} 
} 

我给了一个什么样的可能的解决方案看起来像一个例子here。如果您将显示屏更改为在移动设备上屏蔽，则可以将每个div叠加在一起。如果您在jsfiddle中更改屏幕大小，您可以看到更改。我还为每个div的底部添加了一些边距，因为它们彼此接触。请让我知道如果您需要任何进一步的帮助！