미디어 쿼리와 응답하는 그리드 시스템

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; 
} 
} 

예를 들어 가능한 해결책은 무엇입니까? 디스플레이를 모바일에서 차단하도록 변경하면 각 div가 서로 겹쳐집니다. jsfiddle에서 화면 크기를 변경하면 변경된 동작을 볼 수 있습니다. 또한 각 div의 맨 아래에 마주 보는 부분을 추가 했으므로 서로 마주 보게되었습니다. 추가 도움이 필요하면 알려주세요.