Médias interroge et rend un système de grille réceptif

Question

Je suis un peu familier avec une requête multimédia, mais quand il s'agit de plusieurs divs de différentes tailles et formes, je suis complètement perdu. Donc, si quelqu'un voulait bien me guider dans le processus, ce serait merveilleux. Ou juste peut-être me donner quelques conseils, c'est tout ce que je demande vraiment! En ce moment j'ai 7 divs séparés, tous positionnés comme je le voudrais, je ne sais pas comment le garder réactif pour les différents appareils.

.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>

Merci à tous ceux qui décide de me aider à l'avance!

Answer 1

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

je lui ai donné un exemple de here quoi ressemblerait une solution possible. Si vous changez l'affichage pour bloquer sur mobile alors vous obtenez chaque div empilés les uns sur les autres. Vous pouvez voir le changement d'action si vous changez la taille de l'écran dans jsfiddle. J'ai également ajouté une marge au bas de chaque div parce qu'ils se touchent. S'il vous plaît laissez-moi savoir si vous avez besoin d'aide supplémentaire!