メディアクエリとグリッドシステムの応答性

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

可能な解決策の例を示した0​​を与えました。ディスプレイをモバイルでブロックするように変更すると、それぞれのdivが互いの上に積み重ねられます。 jsfiddleで画面のサイズを変更すると、動作の変化を見ることができます。彼らはお互いに触れていたので、私はまた、各部門の下部にいくつかの余裕を追加しました。さらなる助けが必要な場合はお知らせください。