1448 sujets

Web Mobile et responsive web design

Bonjour,
j'essai de refaire mon site en responsive simplement (oops !), et j'ai fait une grille de 12 colonnes avec comme code.
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
margin-right: auto;
margin-left: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
J'ai fait un header et un footer de 12 colonnes, un aside de 3 et un main de 9 en simplifié, sachant que le main contient texte et images :
header {
grid-column: 1/ span 12;
}
aside {
grid-column: 1/ span 3;
}
main {
grid-column: 4/ span 9;
}

footer {
grid-column: 1/ span 12;
}
OK. Je voudrais maintenant améliorer l'ensemble et positionnant selon des blocks de 1 à plusieurs colonnes dans le main et je n'arrive pas à trouver quelque chose de simple pour les positionner.
Quelqu'un peut-il m'aider ?
Merci
Je tiens à préciser que j'ai aussi comme code :
.container [class*="grid-"] {
  float: left;
  width: 8.33333%;
  min-height: 1px; }
.container .grid-1 {
  width: 8.33333%; }
.container .grid-2 {
  width: 16.66667%; }
......

Quand je fais :
<div class="row">
<div class="grid-2">…<div>
<div class="grid-2">...<div>
<div>
cela me met bien les tailles,mais les positionnent les uns sous les autres et non pas les uns à côté des autres. Je ne sais alors comment définir le .row
J'ai essayé d'être plus précis
Merci